React中如何在onSubmit事件处理器中获取提交按钮的值

多个提交按钮是否属于不良模式？ #

完全不是。这种场景在实际开发中很常见，比如表单里的「保存」和「保存并继续编辑」、「提交」和「预览」等，只要按钮功能区分明确、符合用户预期，就是合理设计，不属于不良模式。

如何在onSubmit中获取触发提交的按钮值？ #

你可以利用浏览器原生事件的submitter属性，它会指向触发表单提交的按钮元素，直接读取其value或name属性即可，无需给每个按钮单独绑定onClick。

原生React示例： #

<form onSubmit={(e) => {
  e.preventDefault();
  // 获取触发提交的按钮
  const submitter = e.submitter;
  if (submitter) {
    const actionType = submitter.value;
    // 根据按钮值执行不同逻辑
    switch (actionType) {
      case 'DO_THIS':
        console.log('执行「Do This」操作');
        // 编写对应业务逻辑
        break;
      case 'DO_THAT':
        console.log('执行「Do That」操作');
        // 编写对应业务逻辑
        break;
      default:
        break;
    }
  }
}}>
  <input type="text" placeholder="输入内容" />
  <button type="submit" name="type" value="DO_THIS">Do This!</button>
  <button type="submit" name="type" value="DO_THAT">Do That!</button>
</form>

Formik中的适配： #

Formik的onSubmit回调会接收submitter参数（从原生事件提取），用法和原生一致：

import { Formik, Form, Field } from 'formik';

<Formik
  initialValues={{ content: '' }}
  onSubmit={(values, { setSubmitting, submitter }) => {
    const actionType = submitter.value;
    if (actionType === 'DO_THIS') {
      console.log('执行「Do This」提交逻辑', values);
    } else if (actionType === 'DO_THAT') {
      console.log('执行「Do That」提交逻辑', values);
    }
    setSubmitting(false);
  }}
>
  {({ isSubmitting }) => (
    <Form>
      <Field name="content" as="textarea" placeholder="输入内容" />
      <button type="submit" name="type" value="DO_THIS" disabled={isSubmitting}>Do This!</button>
      <button type="submit" name="type" value="DO_THAT" disabled={isSubmitting}>Do That!</button>
    </Form>
  )}
</Formik>

兼容性说明： #

submitter是HTML5标准属性，现代浏览器（Chrome、Firefox、Edge、Safari 15.4+）均支持，React合成事件也已兼容该属性。若需兼容极老旧浏览器（如IE），可搭配隐藏输入框+按钮onClick更新值的方案，但目前几乎无需考虑这种情况。

这种方案比单独绑定onClick更优雅，既保持了表单提交逻辑的统一性，又避免了重复代码，符合原生表单行为模式。

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