React:“this”在组件函数中未定义

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()
  }

我想在toggle上更新loopActive状态，但该对象在处理程序中未定义。根据教程文档，我这应该是指组件。我遗漏了什么吗?

当前回答

我想解释一下为什么这是没有定义的: 如果在非箭头函数中使用this，则在非严格模式时，this将绑定到全局对象。但在严格模式下，这将是未定义的(https://www.w3schools.com/js/js_this.asp)。

而且ES6的模块总是处于严格模式(javascript:在模块中使用strict是不必要的)。

你可以在ontogglloop函数中绑定这个PlayerControls组件的实例，在构造函数中使用bind方法:

constructor(props) {
    super(props)

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

    this.onToggleLoop = this.onToggleLoop.bind(this)
}

或者使用箭头函数:

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

箭头函数没有上下文，因此箭头函数中的this将表示定义箭头函数的对象。

2022-07-23 15:49:08

其他回答

你可以重写如何从render()方法调用ontogglloop方法。

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={(event) => this.onToggleLoop(event)}
      spin={this.state.loopActive}
    />       
  </div>
    );
  }

React文档显示了从属性中的表达式调用函数时的这种模式。

2020-10-16 14:12:01

如果你正在使用babel，你使用ES7绑定操作符绑定'this' 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>
    )
  }

}

2019-03-14 10:11:46

您应该注意到，这取决于函数的调用方式即:当一个函数作为一个对象的方法被调用时，它的this被设置为该方法被调用的对象。

它可以在JSX上下文中作为组件对象访问，因此您可以像此方法一样内联调用所需的方法。

如果你只是把引用传递给函数/方法，react似乎会把它作为独立的函数调用。

onClick={this.onToggleLoop} // Here you just passing reference, React will invoke it as independent function and this will be undefined

onClick={()=>this.onToggleLoop()} // Here you invoking your desired function as method of this, and this in that function will be set to object from that function is called ie: your component object

2019-09-05 18:09:43

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

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

2017-09-15 07:41:38