如何将onKeyDown事件作为道具传递给父组件

Question

我有一个带有onChange属性和onKeyDown属性的输入。onChange属性接收值{(e) => props.change(e)}，并且在父组件中，我将change属性分配给handleChange函数。我想对我的onKeyDown属性做同样的事情，但是我面临两个问题：

当我使用{(e) => props.key(e)}时，Chrome Devtools说密钥不是道具。当我尝试将{key}而不是(props(传递给子组件时，ChromeDevtools说key不是一个函数。

我正在尝试传递prop，这样我就可以使用父组件中的关键代码值并执行一些逻辑。

我还测试了一下，以确保该函数在Home.js中正常工作。如果有人能给出解决方案并解释为什么会发生这种情况，我将不胜感激。

下面是我的代码示例：

/ App.js
export default function App() {
const key = (e) => {
if (e.keyCode === 8) {
...
}
}
const change = (e) => {
return ...
}
return
<Home
key={key}
change={change}
/>
}
/ Home.js
export default function Home(props) {
return 
<input
onChange={(e) => props.change(e)}
onKeyDown={(e) => props.key(e)}
/>
}

Answer 1

key是React中的一个特殊道具，得到特殊处理：

[…]有两个特殊的道具(ref和key(由React使用，因此不会转发到组件。

因此，如果您更改道具的名称，它应该会起作用：

应用程序.js

export default function App() {
// …
return
<Home
myKey={key}
change={change}
/>
}

主页.js

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