为什么我不能在 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。