如何阻止FluentUI/React Button点击后触发事件？

要实现条件不满足时阻止Button的点击逻辑，无需使用event.preventDefault()或event.stopPropagation()——这两个方法针对的是原生DOM事件的默认行为或事件冒泡，而FluentUI Button的onClick是组件封装后的回调，只要触发点击就会执行。正确的做法是直接在回调内添加条件判断，不满足时提前终止执行，同时可以配合组件的disabled属性优化视觉体验。

具体实现步骤 #

• 先定义你的业务判断条件（比如表单是否验证通过、数据是否完整等）
• 在点击回调中先检查条件，不满足则直接return，跳过后续业务逻辑
• 可选：给Button添加disabled属性，让按钮在条件不满足时呈现禁用样式，同时从根源上阻止点击触发

修改后的代码示例 #

// 子组件内
const handleOnClick = async (event) => {
  // 替换成你的实际条件判断逻辑
  const canProceed = 表单验证通过 && 必要数据已填写;

  // 条件不满足时直接返回，不执行后续代码
  if (!canProceed) {
    return;
  }

  // 条件满足时执行的业务逻辑
  // 比如提交表单、调用接口等
  // ...
};

// 可选：通过disabled属性让按钮在条件不满足时禁用
<PrimaryButton onClick={handleOnClick} disabled={!canProceed}>Save</PrimaryButton>

补充说明 #

如果只在回调内判断而不设置disabled，按钮依然可以被点击，但不会执行后续逻辑；加上disabled属性后，按钮会变成不可点击状态，同时样式也会变为禁用态，更符合用户预期。

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