在 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 }
    )

}