React中reactjs-popup组件trigger内Button的onClick无法触发求助

为什么trigger内的onClick不生效？ #

reactjs-popup的Trigger组件会拦截内部元素的点击事件，用来控制弹窗的显示/隐藏逻辑。你直接在作为trigger的Button上绑定onClick，这个事件会被Popup的内部事件处理逻辑覆盖，所以无法触发。另外，onClick={loadData()}这种写法是直接执行函数，不是传递函数引用，组件每次渲染时都会调用loadData，进而可能引发状态更新导致重复渲染，最终触发React的渲染次数过多限制。

解决方法 #

方法1：使用Popup组件的onOpen钩子 #

这是最贴合reactjs-popup设计的方案，弹窗打开时自动触发数据加载：

import Popup from 'reactjs-popup';

// 假设每一行数据有唯一id
const TableRow = ({ rowData }) => {
  const loadData = async (rowId) => {
    // 调用API拉取对应行的数据
    const res = await fetch(`/api/data/${rowId}`);
    const data = await res.json();
    // 将数据存入状态，用于填充弹窗表单
    // setFormData(data);
  };

  return (
    <tr>
      {/* 其他表格列 */}
      <td>
        <Popup
          trigger={<button>编辑</button>}
          modal
          closeOnDocumentClick
          onOpen={() => loadData(rowData.id)} // 弹窗打开时调用数据加载函数
        >
          {/* 弹窗内的表单，使用状态中的数据填充 */}
          <div className="popup-form">
            {/* 表单内容 */}
          </div>
        </Popup>
      </td>
    </tr>
  );
};

这个方法利用Popup自带的onOpen回调，在弹窗即将打开时执行数据加载，既不会触发重复渲染，也能保证弹窗打开时表单已有数据。

方法2：手动控制弹窗状态（更灵活） #

如果需要更精细的控制，可以自己维护弹窗的显示状态，放弃Popup组件的自动trigger逻辑：

import { useState } from 'react';
import Popup from 'reactjs-popup';

const TableRow = ({ rowData }) => {
  const [isOpen, setIsOpen] = useState(false);
  const loadData = async () => {
    const res = await fetch(`/api/data/${rowData.id}`);
    const data = await res.json();
    // setFormData(data);
    setIsOpen(true); // 加载完数据再打开弹窗
  };

  return (
    <tr>
      {/* 其他表格列 */}
      <td>
        <button onClick={loadData}>编辑</button>
        <Popup
          open={isOpen}
          modal
          closeOnDocumentClick
          onClose={() => setIsOpen(false)}
        >
          {/* 弹窗表单 */}
        </Popup>
      </td>
    </tr>
  );
};

这种方式完全由你控制按钮的点击事件和弹窗的显示时机，适合需要先完成数据加载再打开弹窗的场景，避免弹窗打开时表单为空的情况。

注意事项 #

• 永远不要在onClick里直接执行函数（如onClick={loadData()}），必须传递函数引用（onClick={loadData}）或者箭头函数包裹（onClick={() => loadData(rowId)}）。
• 如果loadData会更新组件状态，确保不会引发无限渲染（比如不要在渲染函数里直接调用loadData）。

内容的提问来源于stack exchange，提问作者Ryan Millares