React Semantic UI Form双提交按钮如何传递不同的status参数？

问题根因 #

你遇到的是React UI组件库封装的常见坑点，核心有两个可能的原因：

1. 大部分React UI库的Button组件会把type属性作为样式控制参数（比如primary/ghost等样式类型），而非原生<button>标签的type属性，你写的type="submit"实际没有生效，按钮本质不是标准的表单提交按钮，自然不会被FormData收录
2. 部分UI库的Button组件默认不会透传name/value等表单相关属性到底层的原生<button>节点，导致浏览器识别不到按钮对应的表单字段

可行解决方案 #

方案1：状态托管（兼容性最好，全场景通用） #

用React状态存储提交时的status值，提交时手动插入FormData，不受UI库封装限制：

import { useState } from 'react';

// 组件内定义状态
const [submitStatus, setSubmitStatus] = useState('');

// 表单逻辑
<Form onSubmit={(e) => {
  e.preventDefault();
  const formData = new FormData(e.target);
  // 手动插入状态里的status值
  formData.append('status', submitStatus);
  console.log('FormData', Object.fromEntries(formData));
}}>
  ... form fields ...
  <Button 
    icon="thumbs up" 
    content="Authorize" 
    positive 
    onClick={() => setSubmitStatus('A')}
    htmlType="submit"
  />
  <Button 
    icon="thumbs down" 
    content="Reject" 
    negative 
    onClick={() => setSubmitStatus('R')}
    htmlType="submit"
  />
</Form>

方案2：修正UI库属性透传 #

如果你不想额外加状态，可以按你用的UI库规范调整属性，绝大多数主流UI库（Ant Design、Semantic UI React等）都支持用htmlType指定原生按钮的类型，同时会透传name、value属性到原生节点：

<Button 
  icon="thumbs up" 
  htmlType="submit" 
  content="Authorize" 
  name="status" 
  value="A" 
  positive 
/>
<Button 
  icon="thumbs down" 
  htmlType="submit" 
  content="Reject" 
  name="status" 
  value="R" 
  negative 
/>

方案3：隐藏表单域兜底 #

也可以在表单里加一个隐藏的status输入框，点击按钮时先给隐藏框赋值再提交：

<Form onSubmit={(e) => {
  e.preventDefault();
  console.log('FormData', Object.fromEntries(new FormData(e.target)));
}}>
  ... form fields ...
  {/* 新增隐藏域存储status */}
  <input type="hidden" name="status" id="status-input" />
  <Button 
    icon="thumbs up" 
    content="Authorize" 
    positive 
    onClick={() => document.getElementById('status-input').value = 'A'}
    htmlType="submit"
  />
  <Button 
    icon="thumbs down" 
    content="Reject" 
    negative 
    onClick={() => document.getElementById('status-input').value = 'R'}
    htmlType="submit"
  />
</Form>

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