小编典典

反应将此绑定到类方法

reactjs

所以我正在读一本关于React的书,说我必须像这样绑定我的方法

this.onClickMe = this.onClickMe.bind(this);

但看起来不用上面的代码就可以正常工作

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

但这是说我应该做这样的事情,

class ExplainBindingsComponent extends Component {
  constructor() {
    super();
    this.onClickMe = this.onClickMe.bind(this);
  }
  onClickMe() {
    console.log(this);
  }
  render() {
    return (
      <button
        onClick={this.onClickMe}
        type="button"
      >
        Click Me
  </button>
    );
  }
}

this.onClickMe = this.onClickMe.bind(this);仍然是我必须做的?如果可以的话,与上面的例子相比,它能做什么


阅读 280

收藏
2020-07-22

共1个答案

小编典典

有多种方法可以将函数绑定到React类的词法上下文,

  • 一种这样的方法是将其绑定到构造函数中,

  • 另一种方法是将类字段用作箭头函数,并且

  • 使用.bind或arrow在渲染中绑定的第三种方法,

每个都可以使用,但是最好避免在渲染中绑定,因为每个渲染都会返回一个新函数

使用类字段作为箭头功能。

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

绑定渲染

onClick={() => this.onClickMe() }

要么

onClick={this.onClick.bind(this)}
2020-07-22