在ReactJS应用程序中,无法直接从keyDown事件处理程序中调用函数的原因是,ReactJS的事件处理程序中的this指向的是undefined,而不是组件实例。为了解决这个问题,可以使用箭头函数或者在构造函数中绑定this。
class MyComponent extends React.Component {
handleKeyDown = (event) => {
// 在这里可以调用函数
myFunction();
}
render() {
return (
<div onKeyDown={this.handleKeyDown}>
{/* 组件内容 */}
</div>
);
}
}
class MyComponent extends React.Component {
constructor(props) {
super(props);
this.handleKeyDown = this.handleKeyDown.bind(this);
}
handleKeyDown(event) {
// 在这里可以调用函数
myFunction();
}
render() {
return (
<div onKeyDown={this.handleKeyDown}>
{/* 组件内容 */}
</div>
);
}
}
这样,无论使用箭头函数还是在构造函数中绑定this,都可以在keyDown事件处理程序中调用函数。
领取专属 10元无门槛券
手把手带您无忧上云