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

在专注于输入时按 enter 会触发同级按钮

Pressing enter while focused on input causes sibling button to fire

reactjs

forms

event-bubbling