React Hook Form中提交按钮值获取的解决方案

在使用React Hook Form处理表单提交时，开发者有时会遇到一个常见问题：当表单中包含多个提交按钮时，如何准确获取被点击按钮的值。这个问题在传统的HTML表单中可以通过按钮的name和value属性轻松实现，但在React Hook Form中需要采用不同的处理方式。

问题背景

在传统HTML表单中，当表单包含多个提交按钮时，可以通过为每个按钮设置相同的name属性和不同的value属性来区分用户点击了哪个按钮。表单提交时，被点击按钮的name和value会被包含在表单数据中。

然而，React Hook Form采用了不同的数据收集机制。它默认情况下不会自动包含提交按钮的值到表单数据中，这可能导致开发者无法直接获取被点击按钮的信息。

解决方案

React Hook Form提供了handleSubmit函数的第二个参数来访问原生事件对象。通过这个事件对象，我们可以获取被点击按钮的相关信息。

const onSubmit = (data: any, event?: React.BaseSyntheticEvent) => {
  console.log(data); // 表单数据
  console.log(event?.nativeEvent?.submitter?.value); // 被点击按钮的值
};

实现细节

1. 表单定义：在表单中定义多个提交按钮，为每个按钮设置不同的value属性

<form onSubmit={handleSubmit(onSubmit)}>
  <input {...register("test")} />
  <button type="submit" value="button1">按钮1</button>
  <button type="submit" value="button2">按钮2</button>
</form>

2. 提交处理：在提交处理函数中通过event参数获取被点击按钮的值

const onSubmit = (data, event) => {
  const buttonValue = event.nativeEvent.submitter.value;
  // 根据不同的按钮值执行不同的逻辑
  if (buttonValue === "button1") {
    // 处理按钮1的逻辑
  } else if (buttonValue === "button2") {
    // 处理按钮2的逻辑
  }
};

注意事项

1. 确保按钮设置了type="submit"属性
2. 使用event.nativeEvent.submitter来访问触发提交的元素
3. 考虑添加类型检查以确保代码的健壮性
4. 对于TypeScript项目，需要正确处理event参数的可选性

替代方案

如果不想依赖事件对象，也可以考虑以下替代方案：

1. 使用不同的onClick处理函数
2. 在表单中添加隐藏字段，在按钮点击时更新该字段
3. 使用状态管理来跟踪最后点击的按钮

总结

React Hook Form虽然简化了表单处理流程，但在处理传统HTML表单的某些特性时需要采用特定的方法。通过handleSubmit的第二个参数访问原生事件对象，开发者可以轻松获取被点击提交按钮的值，实现更复杂的表单交互逻辑。这种方法既保持了React Hook Form的简洁性，又提供了处理复杂场景的灵活性。