在 MaterialUI 中单击自定义按钮时如何打开模态框？

Question

我正在尝试在 React 和 Material-UI 中打开一个带有自创按钮的模态。 该按钮还可以调用其他功能，这就是为什么我需要将“模态开口”和其他 function 集成在一个按钮中的原因。 目前，单击按钮时，模态不会自动打开。

你有什么想法？

这就是我将“CanvasLoadingModal”集成到父组件中的方式：

步骤 1. 创建一个调用某个 function 的 Button

return(
<div>
<Button
            variant="contained"
            fullWidth
            className={button1}
            onClick={saveButtonHandler}
          >
            Chatbot in Datenbank <br /> speichern
          </Button>
</div>

步骤 2. 在“saveButtonHandler”中包含带有 props = {true} 的“CanvasLoadingModal” function

const saveButtonHandler1 = () => {
    const showLoadingModal = () => {
      return <CanvasLoadingModal open={true} />;
    };
    showLoadingModal();
}

Answer 1

您可以更新 state 并让 React 处理渲染部分，并在单击时有条件地渲染 CanvasLoadingModal 组件。 同样的 function 也可以用来关闭模态。

const App = ()=> {

    const [showModal,setShowModal] = useState(false);
    
    function showModalHandler(){
        setShowModal(!showModal);
    }
    return (
        <Button onClick={showModalHandler} />
        {showModal ? <CanvasLoadModal open={showModal} />: null }
    )

}