javascript - 反应，处理组件的模态(React, handle modal from component)

Question

How can I catch the click on some buttom from a modal, to return true or false to the component that is calling the modal?(如何捕获模态中某些按钮的单击，以将true或false返回给调用模态的组件？)

handleSubmitSaveConfigurations = async (row) => { const { scadaValidation } = this.props; const result = await scadaValidation(11); if (result.statusCode !== 200) { // Opens the modal to ask if you really want to save this.setState({openSimpleModal: true}); this.setState({contentSimpleModal: this.warningModal()}); // Here I have to catch if the modal click yes or no. // In case yes, do nothing and continue with the code // But in case "no" returns false and stops } // If result.statusCode === 200 returns true return true; } warningModal = () => ( <div> Do you want to save? <Button id="btnClose" onClick={() => this.handleModalClickClose()}>No</Button> <Button id="btnSave" onClick={() => this.handleModalClickClose()}>Yes</Button> </div> ); handleModalClickClose = () => this.setState({ openSimpleModal: false });   ask by pmiranda translate from so

Answer 1

You could pass a handler to be executed inside your modal.(您可以传递一个要在模态内部执行的handler 。)

const Modal = ({ callback }) =>{ const handleClick = arg => callback(arg) return( <div> <button onClick={() => handleClick('button1')}>A</button> <button onClick={() => handleClick('button2')}> B</button> </div> ) } And expect to receive this value inside the component which is calling Modal(并期望在调用Modal的组件中接收此值) const TheOneWhoCalls = () =>{ const onModalClick = arg => console.log(arg) return <Modal callback={onModalClick} /> }