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

您可以传递一个handler以便在您的模态内部执行。

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} />
}

Answer 2

您可以在父组件上创建一个函数，而在模态内部，您只能使用它。 https://reactjs.org/docs/lifting-state-up.html#lifting-state-up

父母：

constructor () {
  this.state: {test: false}
}

setStateTest (value) {
  this.setState(value)
}

render () {
  return <modal handlerSetParentStateTest = {setStateTest}></modal>
}

模式：

// this will set the parent state
this.props.handlerSetParentStateTest(true);

Answer 3

我想分享我的解决方案，以确保将来会需要它。它是@Dupocas的实现

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

    return (
    <div>
        Wanna save?
        <Button id="btnCloseModal"      onClick={() => handleClick(0)}>No</Button>
        <Button id="btnGuardarConfirm"  onClick={() => handleClick(1)}>Sí</Button>
    </div>)
};

class TableDisplayReportRecord extends Component<Props, State> {

    constructor {...}

    handleValidate = async (row) => {

        const { scadaValidation } = this.props;

        const verify = await scadaValidation();

        if (verify.statusCode !== 200) {
            this.setState({openSimpleModal: true});

            const onModalClick = arg => {
                this.setState({openSimpleModal: false});
                //do nothing
                if (arg === 0) return false;
                //if user selected "Yes", call the function that I need
                else this.handleSubmitSave(row);

            };

            this.setState({contentSimpleModal:
                    <Modal
                        callback={onModalClick}
                    />
            })
        }
    }

    handleSubmitSave = async (row) => {...}

    ...

}

反应，处理组件的模态

3 个答案: