React: «это» не определено внутри компонента функции

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 объект не определен в обработчике. Согласно учебному документу, I this должен ссылаться на компонент. Я что-то упускаю?React: «это» не определено внутри компонента функции

источник

2015-11-28 Maximus S

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

constructor (props){ 
    super(props); 

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

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

}

источник

2015-11-28 16:40:35 Ivan

, если вы измените свойство onClick на '() => this.onToggleLoop' после перемещения функции onToggleLoop в ваш класс реагирования, он также будет работать. – Sam

+18

Вам действительно нужно привязывать каждый метод каждого класса реагирования? Разве это не сумасшедший? –

@AlexL Есть способы сделать это без явной привязки методов. если вы используете babel, можно объявить каждый метод для компонента React как функции стрелок. Здесь есть примеры: https://babeljs.io/blog/2015/06/07/react-on-es6-plus – Ivan

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

Одним из них является добавление this.onToggleLoop = this.onToggleLoop.bind(this); в конструктор.

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

А затем есть onClick={this.onToggleLoop.bind(this)}.

источник

2015-11-28 16:38:38

@limelights для редактирования. –

Nice и ясно. – Ionut

Почему работает onToogleLoop =() => {}? У меня такая же проблема, и я привязывал ее к моему конструктору, но он не работал ... и теперь я видел ваше сообщение и заменяю свой метод синтаксисом функции стрелки, и он работает.Вы можете мне это объяснить? – DrMed

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

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

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

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

источник

2016-06-23 23:09:36 duhaime

Это много ненужных функций, которые вы создаете там, каждый раз список визуализируется ... –

@TJCrowder Да, это правда, эти функции создаются заново каждый раз, когда вызывается рендеринг. Лучше создавать функции как методы класса и связывать их один раз с классом, но для новичков привязка к контексту вручную может быть полезным – duhaime

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

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

источник

2017-09-15 07:41:38 DrMed

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

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

http://www.react.express/fat_arrow_functions

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

источник

2017-12-04 11:15:57 ShaTin

-1

Его несколько общих для отладчиков пропустить область видимости this при установке точки останова, даже при использовании вышеуказанных стратегий, чтобы связать его правильно, все равно возвращается undefined.

Иногда он связывается правильно после перекомпиляции. То есть, выключите сервер webpack и перекомпилируйте, не просто горячую перекомпиляцию.

Ложные негативы не всегда означают, что ваш код сломан.

источник

2018-02-01 16:27:51

React: «это» не определено внутри компонента функции

ответ

Смежные вопросы