Estoy tratando de asignar valores ingresados en un modal para indicar variables en la página principal. Para hacer esto, entiendo que tengo que vincular una función a los accesorios del elemento principal. El problema es que cuando hago esto, de las tres funciones que intento vincular, solo dos aparecen en la función modal.
Principal.js
import './Modal'; export class Main extends Component{ constructor(props){ super(props); this.state = { foo : false}; this.handleShow = this.handleShow.bind(this); this.handleClose = this.handleClose.bind(this); this.uploadFile = this.uploadFile.bind(this); } handleShow(){ this.setState({ foo : true}); } handleClose(){ console.log("Close something"); } uploadFile(){ console.log("File uploaded"); } render(){ return( <div> <Button id="button" onClick = {(e) => this.handleShow()}> Upload </Button> <Uploadmodal stateProps={this.state} handleClose={this.handleClose} handleShow={this.handleShow} /> </div> }Modal.js
function UploadModal(props){ <Modal show={props.stateProps.foo} onHide={props.handleClose} style={{opacity:1}} > <Modal.Header closeButton> <Modal.Title>Upload File</Modal.Title> </Modal.Header> <Modal.Footer> <Button variant="secondary" onClick={props.handleClose}> Cancel </Button> <Button variant="primary" onClick={props.uploadFile}> Ok </Button> </Modal.Footer> </Modal> } Cuando se llama desde dentro de la función Modal, las funciones handleClose() y handleShow() funcionan bien. Pero al llamar a la función uploadFile() aparece un error que dice que props.uploadFile is not a function . Al verificar los accesorios en la función modal, aparecen handleshow y handleClose pero no hay un par clave/valor para uploadFile.
El Modal funciona perfectamente bien en una página diferente y esa página pasa todas las funciones que se han vinculado. Así que estoy completamente seguro de que el código modal funciona bien. También tenga en cuenta que cualquier otra función pasada excepto handleShow() y handleClose() no aparece.
Cualquier sugerencia sera apreciada. ¡¡Gracias por adelantado!!
Así que encontré el error en mi código. El modal.js debe pasar la función uploadFile como parámetro al llamar al uploadModal . Agregué la función uploadFile pero nunca actualicé la llamada a la función UploadModal . El código debe ser:
Principal.js
import './Modal'; export class Main extends Component{ constructor(props){ super(props); this.state = { foo : false}; this.handleShow = this.handleShow.bind(this); this.handleClose = this.handleClose.bind(this); this.uploadFile = this.uploadFile.bind(this); } handleShow(){ this.setState({ foo : true}); } handleClose(){ console.log("Close something"); } uploadFile(){ console.log("File uploaded"); } render(){ return( <div> <Button id="button" onClick = {(e) => this.handleShow()}> Upload </Button> <Uploadmodal stateProps={this.state} handleClose={this.handleClose} handleShow={this.handleShow} uploadFile={this.uploadFile} /> </div> }