Soy nuevo usando reactjs estoy haciendo un componente y me acaba de surgir un problema espero ser claro y me puedan ayudar.
Tengo un componente que muestra un modal y recibe 3 parámetros.
- text- String
- btn1- {text, function}
- btn2- {text, function}
import React from 'react';
import ReactDOM from 'react-dom';
class Modal extends React.Component {
render(){
return(
<div className="modal fade show" style={{ display: 'block' }} role="dialog">
<div className="modal-dialog" role="document">
<div className="modal-content">
<div className="modal-header">
<h5 className="modal-title">Alerta</h5>
</div>
<div className="modal-body">
<p>{this.props.text}</p>
</div>
<div className="modal-footer">
<button type="button" className="btn btn-primary" onClick={this.props.btn1.function}>{this.props.btn1.text}</button>
<button type="button" className="btn btn-primary" onClick={this.props.btn2.function}>{this.props.btn2.text}</button>
</div>
</div>
</div>
</div>
);
}
}
export default Modal;
Este componente lo llamo desde otro componente, con el siguiente código
let btn1 = { text: "No", function: this.closeModalWarning }
let btn2 = { text: "Si", function: this.deleteImage(1) }
this.openModal("¿Desea eliminar?",btn1, btn2);
openModal(text, btn1, btn2){
<Modal text={text} btn1={btn1}, btn2={btn2} />
}
deleteImage = (index) => {
console.log(index);
}
Mi problema es que cuando aparece el dialog la función deleteImage
se ejecuta y cuando hago clic en el botón de si no pasa nada.
Espero y me puedan ayudar.
Gracias.