為什么我不能在 React 的 Popup 組件的觸發器中使用 onClick？

Question

我有一個表，其中每一行的最后一列包含一個按鈕，該按鈕旨在觸發一個彈出窗口以在我的 React 應用程序中“編輯和保存”該行的某些值。 部分標准是在彈出窗口外單擊也會將其關閉，同時防止用戶在彈出窗口關閉之前單擊后台的內容。

為此，我選擇使用名為reactjs-popup的 package。 目前，對於所有標准，它都能完美運行。 不過，下一步是在單擊按鈕時運行 function，這樣我就可以從 API 中提取數據來填充字段。 但是，我發現我無法從用作觸發器的按鈕的 onClick 調用任何函數。 這是代碼的主要片段：

import Popup from 'reactjs-popup' // this is the npm package I used
// more react code, including an arbitrary loadInfo function
<Popup
    trigger = { 
        <Button onClick = {() => { loadInfo() }}
    }
    modal
    nested
>
{ close => (
    <div className = "modal1" id = "popupForm">
        // popup content with input forms with values to be populated
    </div>
}
</Popup>

我遇到的主要問題是觸發器中按鈕的“onClick”部分。 無論我放在那里什么，單擊它時它都不會運行。 當我將同一個按鈕作為獨立按鈕而不是彈出窗口的觸發器進行測試時，它工作正常。

我也試過使用

onClick = {loadData()}

但這恰恰導致了function一渲染就不停的跑，必然會因為渲染太多而崩潰。 有誰知道為什么這個 reactjs-popup 組件不允許在其觸發器中使用 onClick？ 如果是這樣，如何解決它？ 謝謝！

Answer 1

我相信你想在彈出窗口打開時加載信息。

為此，Popup 中有一個onOpen道具，它接受 function。你可以使用它，

或者您可以使用 state 手動設置open道具。在彈出窗口外有一個按鈕，並在單擊時更新打開的 state。