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

实际上，让我们不要只说出来，让我们put it in a JSFiddle example。我想要发生的是：

点击＆＃34;其他操作＆＃34;按钮触发otherAction功能（确实如此！）
点击＆＃34;提交＆＃34;按钮触发submit功能（确实如此！）
将光标放在文本框中并按Enter键会触发submit功能（目前无效！）

在＃3中，相反的是otherAction被触发。我怎么能改变它？

Answer 1

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

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

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

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

1 个答案: