class PlayerControls extends React.Component {
  constructor(props) {
    super(props)

    this.state = {
      loopActive: false,
      shuffleActive: false,
    }
  }

  render() {
    var shuffleClassName = this.state.toggleActive ? "player-control-icon active" : "player-control-icon"

    return (
      <div className="player-controls">
        <FontAwesome
          className="player-control-icon"
          name='refresh'
          onClick={this.onToggleLoop}
          spin={this.state.loopActive}
        />
        <FontAwesome
          className={shuffleClassName}
          name='random'
          onClick={this.onToggleShuffle}
        />
      </div>
    );
  }

  onToggleLoop(event) {
    // "this is undefined??" <--- here
    this.setState({loopActive: !this.state.loopActive})
    this.props.onToggleLoop()
  }

我想更新loopActive的切换状态，但this目标是在处理不确定的。根据该教程医生，我this应该是指该组件。我缺少的东西吗？

Answer 1:

ES6 React.Component不会自动绑定方法本身。你需要自己捆成构造。像这样：

constructor (props){
  super(props);

  this.state = {
      loopActive: false,
      shuffleActive: false,
    };

  this.onToggleLoop = this.onToggleLoop.bind(this);

}

Answer 2:

有一对夫妇的方式。

之一是添加this.onToggleLoop = this.onToggleLoop.bind(this); 在构造函数中。

另一个是箭头功能onToggleLoop = (event) => {...}

再有就是onClick={this.onToggleLoop.bind(this)} 。

Answer 3:

写你的函数是这样的：

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

http://www.react.express/fat_arrow_functions

为关键字的结合，这是相同的外和脂肪箭头函数内。这比用函数声明的函数，它可以在调用时结合此给另一个对象不同。保持这种结合对于像映射操作很方便：this.items.map（X => this.doSomethingWith（X））。

Answer 4:

我跑进渲染功能类似的绑定，最终通过的情况下this通过以下方式：

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

我以前也用过：

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

Answer 5:

如果使用的是巴贝尔，绑定“这个”使用ES7绑定运营商https://babeljs.io/docs/en/babel-plugin-transform-function-bind#auto-self-binding

export default class SignupPage extends React.Component {
  constructor(props) {
    super(props);
  }

  handleSubmit(e) {
    e.preventDefault(); 

    const data = { 
      email: this.refs.email.value,
    } 
  }

  render() {

    const {errors} = this.props;

    return (
      <div className="view-container registrations new">
        <main>
          <form id="sign_up_form" onSubmit={::this.handleSubmit}>
            <div className="field">
              <input ref="email" id="user_email" type="email" placeholder="Email"  />
            </div>
            <div className="field">
              <input ref="password" id="user_password" type="new-password" placeholder="Password"  />
            </div>
            <button type="submit">Sign up</button>
          </form>
        </main>
      </div>
    )
  }

}

Answer 6:

如果你打电话给你创建方法在生命周期的方法，比如componentDidMount ......那么你只能使用this.onToggleLoop = this.onToogleLoop.bind(this)和脂肪箭头功能onToggleLoop = (event) => {...} 。

一个函数声明的构造函数中的正常做法不会起作用，因为生命周期方法调用时间较早。

文章来源: React: “this” is undefined inside a component function