在React中是否需在onButtonClick中校验按钮禁用状态？

问题背景 #

在React组件中使用带onClick和disabled属性的按钮，其中onButtonClick动作和isButtonDisabled状态都来自Zustand仓库。isButtonDisabled选择器包含判断按钮是否禁用的逻辑，原本预期组件通过该变量禁用按钮，仅在未禁用时触发点击动作，但担心存在组件未正确设置disabled却误触发onButtonClick的情况。疑问：是否需要在onButtonClick动作里重复禁用判断逻辑，直接返回当按钮处于禁用状态时的调用？是该重复逻辑兜底，还是仅信任组件通过isButtonDisabled设置disabled即可？

代码示例 #

export const Component: React.FC = () => {
  // Zustand store，调用包含判断逻辑的选择器
  const isBtnDisabled = useAppState(`isBtnDisabled`);
  const { onBtnClick } = useActions();

  return (
      <Button onClick={onBtnClick} isDisabled={isBtnDisabled}>
        Delete Layer
      </Button>
  );
}

实用解答 #

核心思路：按需选择，场景优先 #

1. 信任组件disabled属性的情况

如果项目有严格的开发规范，确保所有按钮都会绑定对应的禁用状态，且不会出现遗漏disabled属性的操作，那完全可以依赖组件层面的控制。因为浏览器原生会阻止禁用按钮的点击事件触发，React的合成事件也遵循这个规则，正常情况下onBtnClick根本不会被调用，无需额外判断。

2. 动作内加判断的兜底场景

如果存在以下情况，建议在onBtnClick里加一层判断：

• 防人为失误：团队新人可能忘记设置disabled，或者后续维护时有人不小心删掉了这个属性，动作内的判断能避免误触发关键操作（比如删除数据）。
• 动作跨场景复用：如果onBtnClick还会被其他途径触发（比如键盘快捷键、其他组件的回调），这些场景没有disabled属性的限制，必须在动作内做判断才能确保逻辑安全。

代码实现参考 #

方式一：在Zustand动作里加判断

// Zustand动作定义
const useActions = () => {
  const isBtnDisabled = useAppState(state => state.isBtnDisabled);
  
  const onBtnClick = () => {
    // 兜底判断
    if (isBtnDisabled) return;
    // 原本的点击处理逻辑
    // 比如：删除图层的操作
  };

  return { onBtnClick };
};

方式二：在组件内包装点击回调

export const Component: React.FC = () => {
  const isBtnDisabled = useAppState(`isBtnDisabled`);
  const { onBtnClick } = useActions();

  const handleClick = () => {
    if (isBtnDisabled) return;
    onBtnClick();
  };

  return (
      <Button onClick={handleClick} isDisabled={isBtnDisabled}>
        Delete Layer
      </Button>
  );
}

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