React中onKeyDown的handleKeyDown调用Handlesubmit需传e的原因

我做了个带添加按钮的简易待办事项列表，想用onKeyDown事件实现按Enter键添加功能，但对handleKeyDown的逻辑有点懵。相关代码如下：

const Handlesubmit = (e) =>{
      e.preventDefault()
      setTodo([...todo, {text: input, id: Math.random() * 1000}])
  }

  const handleKeyDown = (e) => {
    if (e.key === 'Enter') {
      Handlesubmit(e)
    }
  } 

我搞不懂的是：为什么在handleKeyDown里调用Handlesubmit时必须传事件对象e？要是直接调用Handlesubmit()，就会导致Handlesubmit里的e.preventDefault()报错“e is not defined”，求解释原因。

原因拆解： #

• Handlesubmit函数定义时明确要求接收一个参数e，而且函数内部直接依赖这个参数调用e.preventDefault()。调用函数时如果不传参数，e就会处于未定义状态，报错是理所当然的。
• 当触发onKeyDown事件时，浏览器会自动创建一个键盘事件对象，并把它传给handleKeyDown的参数e。这个事件对象包含了当前按键的所有上下文信息，也自带preventDefault()这类事件处理方法。
• 你必须把这个现成的事件对象传给Handlesubmit，这样Handlesubmit里的e才有具体的指向，才能正常执行e.preventDefault()——不然函数根本不知道你说的e是什么东西。

额外说明：这里的e.preventDefault()是用来阻止Enter键的默认行为（比如表单自动提交、输入框意外换行等），就算你不关心报错，不传事件对象的话，这些默认行为也没法被阻止，可能会导致页面出现意料之外的操作。

内容的提问来源于stack exchange，提问作者Josh Lee