Soy bastante nuevo para reaccionar y estoy teniendo un problema. Estoy usando reactstrap para llamar a un modal al hacer clic en un botón. En los documentos de reactstrap, el modal se llama al hacer clic en un botón en el componente modal de la siguiente manera:
import React from 'react'; import { Button, Modal, ModalFooter, ModalHeader, ModalBody } from 'reactstrap'; class SubmitConfirmation extends React.Component { constructor(props) { super(props); this.state = { modal: false, fade: true, }; this.toggle = this.toggle.bind(this); } toggle() { this.setState({ modal: !this.state.modal, fade: !this.state.fade, }); } render() { return ( <div> <Button color="danger" onClick={this.toggle}> TOGGLE </Button> <Modal isOpen={this.state.modal} toggle={this.toggle} fade={this.state.fade} className={this.props.className}> <ModalHeader toggle={this.toggle}>Modal title</ModalHeader> <ModalBody></ModalBody> <ModalFooter> <Button color="primary" onClick={this.toggle}> Do Something </Button>{' '} <Button color="secondary" onClick={this.toggle}> Cancel </Button> </ModalFooter> </Modal> </div> ); } } export default SubmitConfirmation;Quiero llamar al modal desde el clic de un botón en un componente principal ¿Cómo hago esto?
export default class SampleApp extends React.Component { constructor(props) { super(props); this.state = {} } render() { return ( <div> <Button color="primary" size="sm" style={{ width: '100%' }} onClick={this.toggle} Submit </Button> </div> ) } }¿Cómo llamo al botón desde el componente principal?
Parece que olvidaste agregar this.props.toggle
<div> <Button color="primary" size="sm" style={{ width: '100%' }} onClick={this.props.toggle} Submit </Button> </div>Dado que está pasando la función de alternar a través de accesorios, la función pertenece a la propiedad this.props de su componente, al igual que cualquier otra propiedad que pase al componente secundario a través de accesorios
Deberá mover el estado al componente principal para obtener esta funcionalidad,
Parent Component:
import React from "react"; import { Button } from "reactstrap"; import Child from "./Child"; export default class SampleApp extends React.Component { constructor(props) { super(props); this.state = { modal: false, fade: true }; this.toggle = this.toggle.bind(this); } toggle() { this.setState({ modal: !this.state.modal, fade: !this.state.fade }); } render() { return ( <> <Button color="primary" size="sm" style={{ width: "100%" }} onClick={this.toggle} > Open </Button> <Child modal={this.state.modal} toggle={this.toggle} fade={this.state.fade} /> </> ); } } Child Component
import React from "react"; import { Button, Modal, ModalFooter, ModalHeader, ModalBody } from "reactstrap"; class SubmitConfirmation extends React.Component { render() { return ( <Modal isOpen={this.props.modal} toggle={this.props.toggle} fade={this.props.fade} className={this.props.className} > <ModalHeader toggle={this.toggle}>Modal title</ModalHeader> <ModalBody></ModalBody> <ModalFooter> <Button color="primary" onClick={this.toggle}> Do Something </Button>{" "} <Button color="secondary" onClick={this.toggle}> Cancel </Button> </ModalFooter> </Modal> ); } } export default SubmitConfirmation;