javascript - React，处理来自组件的模态

Question

如何捕获模态中某个按钮的点击，以便向调用模型的组件返回 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 });

Answer 1

您可以传递一个处理程序以在模态中执行。

const Modal = ({ callback }) =>{
    const handleClick = arg => callback(arg)

    return(
        <div>
            <button  onClick={() => handleClick('button1')}>A</button>
             <button  onClick={() => handleClick('button2')}> B</button>
        </div>
    )
}

并期望在调用Modal的组件内接收该值

const TheOneWhoCalls = () =>{
    const onModalClick = arg => console.log(arg)

    return <Modal callback={onModalClick} />
}