ES6反应。组件不会自动将方法绑定到自身。你需要在构造函数中自己绑定它们。是这样的:

constructor (props){
  super(props);
  
  this.state = {
      loopActive: false,
      shuffleActive: false,
    };
  
  this.onToggleLoop = this.onToggleLoop.bind(this);

}

有几种方法。

一是添加 这一点。ontogglloop = this. ontogglloop .bind(this);在构造函数中。

另一个是箭头函数 ontogglloop = (event) =>{…}。

然后是onClick={this. ontogglloop .bind(this)}。

ES6反应。组件不会自动将方法绑定到自身。你需要在构造函数中自己绑定它们。是这样的:

constructor (props){
  super(props);
  
  this.state = {
      loopActive: false,
      shuffleActive: false,
    };
  
  this.onToggleLoop = this.onToggleLoop.bind(this);

}

我在一个渲染函数中遇到了类似的绑定，并以以下方式传递上下文:

{someList.map(function(listItem) {
  // your code
}, this)}

我还用过:

{someList.map((listItem, index) =>
    <div onClick={this.someFunction.bind(this, listItem)} />
)}

如果你在生命周期方法中调用你创建的方法，比如componentDidMount…那么你只能用这个。ontogglloop = this. ontooglloop .bind(this)和胖箭头函数ontogglloop = (event) =>{…}。

在构造函数中声明函数的正常方法不起作用，因为生命周期方法在前面被调用。

这样写你的函数:

onToggleLoop = (event) => {
    this.setState({loopActive: !this.state.loopActive})
    this.props.onToggleLoop()
}

胖箭头功能

关键字this在胖箭头函数内外的绑定是一样的。这与使用function声明的函数不同，后者可以在调用时将This绑定到另一个对象。维护this绑定对于像映射:this.items这样的操作非常方便。map(x => this.doSomethingWith(x))。