如何在React待办应用中通过按下ENTER键添加新任务？

你开发的待办应用截图如下：

你只需要调整表单提交逻辑即可，不需要额外绑定键盘事件，修改步骤如下：

• 第一步：把添加待办的逻辑抽为公共函数，同时处理表单默认提交行为、空值判断和输入框清空优化
  把下面的代码放在Body组件的状态声明后面：

  const addTodo = (e) => {
    // 阻止form默认提交刷新页面的行为
    e?.preventDefault()
    // 过滤空输入
    if (!toDo.trim()) return
    // 添加新待办
    setToDos([...toDos, {id: Date.now(), text: toDo, status: false}])
    // 清空输入框
    setToDo('')
  }
  

• 第二步：修改form的onSubmit属性，绑定刚才写的addTodo函数，替换原来错误的onSubmit={toDo}绑定：

  <form onSubmit={addTodo}>
  

• 第三步：把原来+号的点击事件也换成调用addTodo，避免逻辑重复：

  <i onClick={addTodo} className="fas fa-plus"></i>
  

原理说明 #

输入框处于form标签内部时，按下回车键会默认触发form的submit事件，只要正确处理这个事件就能实现回车添加的效果，比单独给输入框绑定keydown事件判断按键码的写法更简洁规范。

额外优化建议 #

你现有代码里待办列表的map遍历返回的DOM节点没有加key属性，会触发React的警告，修改为下面的写法即可：

{toDos.map((obj)=>{
  return(
    <div className="todo" key={obj.id}>
    // 剩下的原有逻辑保持不变

内容的提问来源于stack exchange，提问作者Jagannath Krishna.P.A