Question

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

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

提前感谢您的帮助！

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

Answer 1

试试这个。它将使用“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>
  }

}

Answer 2

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

我会使用＆lt; button＆gt;而是元素和onClick处理程序。

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

2 个答案: