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
должен ссылаться на компонент. Я что-то упускаю?
5 ответов
ES6 реагировать.Компонент не автоматически связывает методы с собой. Вам нужно связать их самостоятельно в конструкторе. Вот так:
constructor (props){
super(props);
this.state = {
loopActive: false,
shuffleActive: false,
};
this.onToggleLoop = this.onToggleLoop.bind(this);
}
есть несколько способов.
- это возможность добавить
this.onToggleLoop = this.onToggleLoop.bind(this);
в конструкторе.
другое функции стрелки
onToggleLoop = (event) => {...}
.
и тогда уже onClick={this.onToggleLoop.bind(this)}
.
напишите свою функцию следующим образом:
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)).
я столкнулся с подобной привязкой в функции рендеринга и закончил передачу контекста this
следующим образом:
{someList.map(function(listItem) {
// your code
}, this)}
Я также использовал:
{someList.map((listItem, index) =>
<div onClick={this.someFunction.bind(this, listItem)} />
)}
Если вы называете ваш созданный метод в методах жизненного цикла, таких как componentDidMount... затем вы можете использовать this.onToggleLoop = this.onToogleLoop.bind(this)
и функция жирной стрелки onToggleLoop = (event) => {...}
.
обычный подход объявления функции в конструкторе не будет работать, потому что методы жизненного цикла вызываются ранее.