React中如何向onClick回调同时传递事件对象和自定义prop参数

实现方案 #

你只需要调整两处代码即可完成需求：

1. 调整Edit Load按钮的回调绑定

直接调用handleEdit(article.id)会导致组件渲染时就自动执行函数，需要用箭头函数包裹成点击回调，同时传递事件对象和文章ID：

<a
  href="/LoadManager"
  onClick={(e) => handleEdit(e, article.id)}
  className="theme_btn"
>
  Edit Load
</a>

2. 修改handleEdit函数接收ID参数

在弹窗打开逻辑中加入更新loadID的代码即可：

const [showEdit, setShowEdit] = useState("close");
const [loadID, setLoadId] = useState("1");

const handleEdit = (e, id) => {
    e.preventDefault();
    if (e.target !== e.currentTarget) {
      return;
    }

    switch (showEdit) {
      case "open":
        setShowEdit("close");
        break;
      case "close":
        setShowEdit("open");
        setLoadId(id); // 打开弹窗时同步更新当前编辑的文章ID
        break;
      default:
        setShowEdit("close");
        break;
    }
  };

可选优化 #

你可以把showEdit的状态改为布尔值简化代码，不需要额外做字符串判断：

const [showEdit, setShowEdit] = useState(false);
const [loadID, setLoadId] = useState("1");

// 给id设置默认值，兼容Modal内部关闭按钮不传id的场景
const handleEdit = (e, id = loadID) => {
  e.preventDefault();
  if (e.target !== e.currentTarget) return;
  setShowEdit(prev => !prev);
  // 仅打开弹窗时更新ID
  if (!showEdit) setLoadId(id);
};

内容的提问来源于stack exchange，提问作者Matthew Bussen