Javascript 使用多个按钮响应表单-如何选择一个按钮来处理提交事件？

假设我有这个HTML：

<div id="container"></div>

<p>Output: <span id="output"></span></p>

输出：

这是：

function otherAction(e) {
  document.getElementById('output').innerHTML = 'otherAction';
  e.preventDefault();
}

function submit(e) {
  document.getElementById('output').innerHTML = 'submit';
  e.preventDefault();
}

ReactDOM.render(
  <form onSubmit={submit}>
    <input type="text" defaultValue="foo" />
    <button onClick={otherAction}>Other Action</button>
    <button type="submit">Submit</button>
  </form>,
  document.getElementById('container')
);

函数其他操作（e）{
document.getElementById（'output'）.innerHTML='otherAction'；
e、 预防默认值（）；
}
功能提交（e）{
document.getElementById（'output'）。innerHTML='submit'；
e、 预防默认值（）；
}
ReactDOM.render(
其他行动
提交
,
document.getElementById（'容器'）
);

事实上，让我们不只是说，让我们。我希望发生的是：

单击“其他操作”按钮可触发

otherAction

功能（确实如此！）

点击“提交”按钮触发

Submit

功能（确实如此！）

将光标放在文本框中并按enter键将触发

submit

功能（此功能当前不起作用！）

---

在#3中，相反发生的是

otherAction

被触发。如何更改此设置？

如果您将第一个按钮设置为type=“button”，它应该可以工作

<button type="button" onClick={otherAction}>Other Action</button>

其他操作

---

或者，如果您交换按钮，则需要第一个按钮