0

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.

  1. text- String
  2. btn1- {text, function}
  3. 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.

1 respuesta 1

1

Te diria que empezaras por no usar palabras reservadas del lenguage para nombrar tus variables, me refiero a function. Y el error que te da es porque estás ejecutando function: this.deleteImage(1).

Para que esto te vaya bien, la function deleteImage haz que devuelva otra funcion y listo.

deleteImage = (index) => () => {
   console.log(index);
}

Saludos

1
  • 1
    Muchas gracias por tu ayuda y tu comentario lo tendré en cuenta, gracias.
    – SaulRM
    Commented el 11 abr. 2020 a las 13:01

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.