Reaccionar: “esto” no está definido dentro de una función componente

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 ( 
); } onToggleLoop(event) { // "this is undefined??" <--- here this.setState({loopActive: !this.state.loopActive}) this.props.onToggleLoop() }

Quiero actualizar el estado loopActive al alternar, pero this objeto no está definido en el controlador. De acuerdo con el documento tutorial, this debería referirse al componente. ¿Me estoy perdiendo de algo?

ES6 React.Component no vincula automáticamente métodos a sí mismo. Debes unirlos tú mismo en el constructor. Me gusta esto:

 constructor (props){ super(props); this.state = { loopActive: false, shuffleActive: false, }; this.onToggleLoop = this.onToggleLoop.bind(this); } 

Hay un par de maneras.

Una es agregar this.onToggleLoop = this.onToggleLoop.bind(this); en el constructor

Otra es la función de flecha en onToggleLoop = (event) => {...} .

Y luego está onClick={this.onToggleLoop.bind(this)} .

Escribe tu función de esta manera:

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

http://www.react.express/fat_arrow_functions

el enlace de la palabra clave es el mismo fuera y dentro de la función de flecha de grasa. Esto es diferente de las funciones declaradas con función, que pueden vincular esto a otro objeto en el momento de la invocación. El mantenimiento de este enlace es muy conveniente para operaciones como mapeo: this.items.map (x => this.doSomethingWith (x)).

Me encontré con un enlace similar en una función de renderizado y terminé pasando el contexto de this de la siguiente manera:

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

También he usado:

 {someList.map((listItem, index) => 
)}

Si llama a su método creado en los métodos del ciclo de vida como componentDidMount … entonces solo puede usar this.onToggleLoop = this.onToogleLoop.bind(this) y la función de flecha de grasa onToggleLoop = (event) => {...} .

El enfoque normal de la statement de una función en el constructor no funcionará porque los métodos del ciclo de vida se invocan antes.