要求解释React中 "将事件处理程序绑定到类实例 "的概念。

你好,我是全栈网站开发的新手,我想了解一下全栈网站开发的概念。“将事件处理程序绑定到类实例”,在React中

class Foo extends React.Component{
  constructor( props ){
    super( props );
    this.handleClick = this.handleClick.bind(this); // <- why?
  }
  
  handleClick(event){
    // your event handling logic
  }
  
  render(){
    return (
      <button type="button" 
      onClick={this.handleClick}>
      Click Me
      </button>
    );
  }
}

ReactDOM.render(
  <Foo />,
  document.getElementById("app")
);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

<div id="app"></div>

解决方案:

React docs https:/reactjs.orgdocshandling-events.html。

在JSF回调中,你要注意这个意思。在JavaScript中,类方法默认是不绑定的。如果你忘记绑定this.handleClick并将其传递给onClick,那么当函数被实际调用时,这将是未定义的。

这不是React特有的行为,这是JavaScript中函数工作方式的一部分。一般来说,如果你引用一个后面没有()的方法,例如 onClick={this.handleClick},你应该绑定该方法。

class Foo extends React.Component{
  constructor( props ){
    super( props );
  }
    
  handleClick(event){
    console.log(this); // 'this' is undefined
  }
    
  render(){
    return (
      <button type="button" onClick={this.handleClick}>
        Click Me
      </button>
    );
  }
}

ReactDOM.render(
  <Foo />,
  document.getElementById("app")
);

为了解决这个问题,你可以绑定 this 到类构造函数上的函数

  constructor( props ){
    super( props );
    this.handleClick = this.handleClick.bind(this); 
  }

公共类字段语法(箭头函数)

class Foo extends React.Component{
  handleClick = () => {
    console.log(this); 
  }
 
  render(){
    return (
      <button type="button" onClick={this.handleClick}>
        Click Me
      </button>
    );
  }
} 

本文来自投稿,不代表实战宝典立场,如若转载,请注明出处:https://www.shizhanbaodian.com/40486.html

(0)
上一篇 20小时前
下一篇 20小时前

相关推荐

发表评论

登录后才能评论