具有多个按钮的反应形式 - 如何选择一个处理onSubmit事件？

Question

假设我有这个HTML:

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

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

这个JS:

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')
);

实际上,让我们不要只是说出来,让我们把它放在一个JSFiddle示例中.我想要发生的是:

1. 单击"其他操作"按钮会触发该otherAction功能(确实如此!)

2. 单击"提交"按钮会触发该submit功能(确实如此!)

3. 将光标放在文本框中并按Enter键会触发该submit功能(这当前不起作用!)

在#3中,发生的是otherAction触发的.我怎么能改变呢？

Answer 1

如果您将第一个按钮设置为type ="button",它应该可以工作.

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

https://jsfiddle.net/L0urqamz/3/