在聚焦于输入时按enter键会触发同级按钮

Question

在react应用程序中，有一个带有一些按钮和输入的表单:

<form>
<div>
{
['1', '10', '100'].map(val => (
<button onClick={() => console.log(val)}>
{val}
</button>
}
</div>
<div>
<input type='string' /> 
</div>
</form>

当聚焦于输入字段时，按"Enter"会导致第一个按钮启动(console.log('1'))。

似乎与一些默认的表单行为有关，如将<form>元素更改为<div>，解决了这个问题。

并将event.preventDefault()添加到输入的onKeyDown处理程序也修复了这个问题，这表明有一些事件冒泡涉及。

从我的理解，按下'Enter'时，集中在一个表单的输入字段导致表单提交，和事件冒泡应该只触发父处理程序，所以这是相当令人困惑的我，第一个按钮，这是在兄弟元素将被触发

Answer 1

是的，这是正确的，有type属性在按钮元素- https://www.w3schools.com/jsref/prop_pushbutton_type.asp另外，你可以注意到默认的type属性是submit，所以这意味着按钮可以在按下enter键时被触发。

我认为你可以通过将type属性设置为button来解决这个问题，如下所示。

<button type="button" />