reactjs - 在专注于输入时按 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" />