Javascript 单击MaterialUI中的自定义按钮时，如何打开模式？

我试图在React和Material UI中打开一个带有自创按钮的模式。该按钮还包含其他功能，这就是为什么我需要在一个按钮中集成“模式打开”和其他功能。当前，单击按钮时，模式将不会自动打开

你有什么想法吗

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

第一步。创建一个包含特定功能的按钮

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

返回(
Datenbank的聊天机器人
Speichen

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

const saveButtonHandler1=（）=>{
常量showLoadingModal=（）=>{
返回；
};
showLoadingModal（）；
}

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

const App = ()=> {

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

}

const-App=（）=>{
const[showmodel，setshowmodel]=useState（false）；
函数showModalHandler（）{
设置showmodel（！showmodel）；
}
返回(
{showmodel？：null}
)
}

非常感谢您提供这一伟大的解决方案，它非常有效！

const App = ()=> {

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

}