如何将onKeyDown事件作为Prop传递给父组件？解决命名冲突报错

问题根源 #

React 中的 key 是保留属性，仅用于标识列表中的唯一元素，React 不会将其作为常规 props 传递给子组件。这直接导致了你的两个报错：

• 第一个报错“key不是一个Prop”：React 将你传递的 key 识别为内置的列表标识属性，而非自定义的函数 prop；
• 第二个报错“key不是一个函数”：子组件无法通过 props.key 获取到你定义的函数，自然无法调用。

解决方案 #

将自定义的 prop 名称改为非保留名称即可，比如 onInputKeyDown：

修正后的 App.js

export default function App() {
  const handleInputKeyDown = (e) => {
    if (e.keyCode === 8) {
      // 你的按键逻辑代码
    }
  };

  const change = (e) => {
    // onChange 处理逻辑
  };

  return (
    <Home
      onInputKeyDown={handleInputKeyDown}
      change={change}
    />
  );
}

修正后的 Home.js

export default function Home(props) {
  return (
    <input
      onChange={(e) => props.change(e)}
      onKeyDown={(e) => props.onInputKeyDown(e)}
    />
  );
}

优化提示 #

如果不需要在子组件中对事件做额外处理，可直接绑定函数，避免不必要的箭头函数创建：

<input
  onChange={props.change}
  onKeyDown={props.onInputKeyDown}
/>

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