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

Я хочу обновить loopActive состояние на переключателе, но this объект не определен в обработчике. Согласно учебнику doc, I this должен ссылаться на компонент. Я что-то упускаю?

70
reactjs this

5 ответов

ES6 реагировать.Компонент не автоматически связывает методы с собой. Вам нужно связать их самостоятельно в конструкторе. Вот так:

constructor (props){
  super(props);

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

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

}
106

есть несколько способов.

- это возможность добавить this.onToggleLoop = this.onToggleLoop.bind(this); в конструкторе.

другое функции стрелки onToggleLoop = (event) => {...}.

и тогда уже onClick={this.onToggleLoop.bind(this)}.

52

напишите свою функцию следующим образом:

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

http://www.реагировать.express / fat_arrow_functions

привязка для ключевого слова это то же самое снаружи и внутри функции fat arrow. Это отличается от функций, объявленных с помощью функции, которая может связать это с другим объектом при вызове. Поддержание этой привязки очень удобно для таких операций, как mapping: this.предметы.карта (x = > this.doSomethingWith (x)).

9

я столкнулся с подобной привязкой в функции рендеринга и закончил передачу контекста this следующим образом:

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

Я также использовал:

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

Если вы называете ваш созданный метод в методах жизненного цикла, таких как componentDidMount... затем вы можете использовать this.onToggleLoop = this.onToogleLoop.bind(this) и функция жирной стрелки onToggleLoop = (event) => {...}.

обычный подход объявления функции в конструкторе не будет работать, потому что методы жизненного цикла вызываются ранее.

0