ReactJS中如何实现点击按钮或按下回车键均可触发函数？

方案1：优先推荐，基于原生表单实现（无需手动监听键盘事件） #

将输入框和添加按钮包裹在<form>标签内，利用表单默认提交行为实现需求，无障碍友好，代码更简洁：

<form onSubmit={e => {
  // 阻止表单默认的页面跳转行为
  e.preventDefault()
  handleAddTodo()
}}>
  {/* 你原有的待办名称输入框 */}
  <input ref={todoNameRef} type="text" placeholder="请输入待办内容" />
  {/* 按钮修改为submit类型，不需要再单独绑onClick */}
  <button class="add" type="submit">Add ToDo</button>
</form>

这种方式下，在输入框按下回车键、点击提交按钮都会触发表单提交事件，自动调用添加待办的逻辑。

方案2：手动绑定键盘事件 #

如果不想修改现有结构用表单，可以给输入框（不要绑在按钮上，输入完成后焦点在输入框内，按钮没有焦点无法触发按键事件）绑定onKeyUp事件，判断按下的按键为回车后触发添加逻辑：

{/* 你原有的待办名称输入框，新增onKeyUp绑定 */}
<input 
  ref={todoNameRef} 
  type="text" 
  placeholder="请输入待办内容"
  onKeyUp={e => {
    // 用e.key判断比废弃的keyCode更规范，回车键对应的key值为'Enter'
    if (e.key === 'Enter') {
      handleAddTodo()
    }
  }}
/>
{/* 原有按钮的onClick保留即可 */}
<button class="add" onClick={handleAddTodo}>Add ToDo</button>

你提到的hook方案一般用于需要监听全局按键的场景，当前需求是输入框内的局部按键触发，不需要额外引入hook实现，上述两种方案即可覆盖需求。

内容的提问来源于stack exchange，提问作者Miklos Arpadfi