React中onClick事件同时执行自定义函数与修改state状态的问题

解决方案 #

你需要将onClick绑定为自定义处理函数，在函数内按顺序执行两个目标操作即可。

第一步：补充props #

首先在RuleRow组件的入参中增加父组件传递的setRolling状态更新函数，用于修改rolling状态。

第二步：自定义点击处理逻辑 #

修改后的完整代码如下：

import { useCallback } from 'react'; // 不需要性能优化可省略该行

function RuleRow({ doScore, name, score, description, rolling, setRolling }) {
  const disabled = score !== undefined;

  // 自定义点击处理函数，不需要性能优化可直接写普通函数，不用useCallback包裹
  const handleRowClick = useCallback((e) => {
    // 执行原有打分逻辑，按需传递事件对象
    doScore(e);
    // 更新rolling状态为true
    setRolling(true);
  }, [doScore, setRolling]);

  return (
    <tr
      className={`RuleRow RuleRow-${disabled ? "disabled" : "active"}`}
      onClick={disabled ? null : handleRowClick}
    >
      <td className="RuleRow-name">{name}</td>
      <td className="RuleRow-score">{disabled ? score : description}</td>
    </tr>
  );
}

补充说明 #

• 如果rolling是当前组件内部的状态，直接替换setRolling为你useState返回的状态更新函数即可，无需额外传props。
• 若组件渲染频率不高，也可以直接写内联箭头函数：onClick={disabled ? null : (e) => {doScore(e); setRolling(true)}}，效果完全一致。
• 可以给doScore加可选链doScore?.(e)，避免该函数未传递时报错，不需要可以去掉。

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