如何在 react.js 表单中创建多个提交按钮？答案

【问题标题】：How to create several submit buttons in a react.js form?如何在 react.js 表单中创建多个提交按钮？
【发布时间】：2016-09-24 12:40:48
【问题描述】：

我正在尝试在 react.js 中创建一个表单，用户可以在其中单击两个不同的按钮来执行两个不同的操作。在我的情况下，表单应该允许用户选择一个文档并替换当前文档（第一个按钮）或附加到它（第二个按钮）。是否有可能以单一形式实现这一目标？

我以为我可以使用 onSubmit 函数中的“事件”参数检测应用了哪个按钮，但没有成功。我还考虑过使用对输入和普通按钮的引用来重新创建一个伪表单，但如果存在更简洁的解决方案，我不希望使用这样的 hack。

提前感谢您的帮助！

注意：我发现了一些与多个提交按钮相关的问题（例如here 和 here），但没有一个涉及 react.js 解决方案。

【问题讨论】：

标签： javascript forms reactjs submit

【解决方案1】：

在我看来，您不应该使用 onSubmit 事件。创建 onSubmit 是为了处理通过 POST 请求向服务器发送表单，但您的用例似乎有所不同。

我会改用

【讨论】：

你的意思是只要表单内容由组件自己处理，就不需要/不需要使用onSubmit（甚至是
结构）了吗？
@anmorand 是的，我就是这个意思。

【解决方案2】：

试试这个。它将使用“handleSubmit”函数处理常规提交（通过按钮或按 Enter），并使用“handleAlternate”处理替代提交（通过另一个按钮）。

class Example extends React.Component {

  handleSubmit(event) {
    event.preventDefault();
    ....
  }

  handleAlternate(event) {
    event.preventDefault();
    ...
  }

  render() {
    <form onSubmit={this.handleSubmit.bind(this)}>
      ...
      <button type="submit">Submit</button>
      <button onClick={this.handleAlternate.bind(this)}>Alternate</button>
    </form>
  }

}

【讨论】：

确实，它运行良好。我确信它不会。
注意按钮的类型默认为"submit"。您需要做的是将另一个（带有onClick=... 的那个）定义为带有type="button" 的标准按钮（我知道它看起来不直观。）The Button Tag (MDN)
不是提交按钮，只是普通按钮
备用按钮不检查必填字段