反應，從組件處理模態

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) => {...}

    ...

}