首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

无法从ReactJS应用程序中的keyDown事件处理程序中调用函数

在ReactJS应用程序中,无法直接从keyDown事件处理程序中调用函数的原因是,ReactJS的事件处理程序中的this指向的是undefined,而不是组件实例。为了解决这个问题,可以使用箭头函数或者在构造函数中绑定this。

  1. 使用箭头函数:
代码语言:txt
复制
class MyComponent extends React.Component {
  handleKeyDown = (event) => {
    // 在这里可以调用函数
    myFunction();
  }

  render() {
    return (
      <div onKeyDown={this.handleKeyDown}>
        {/* 组件内容 */}
      </div>
    );
  }
}
  1. 在构造函数中绑定this:
代码语言:txt
复制
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事件处理程序中调用函数。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

领券