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

Quiero actualizar el loopActiveestado en alternar, pero el thisobjeto no está definido en el controlador. De acuerdo con el tutorial doc, thisdebería referirme al componente. ¿Me estoy perdiendo de algo?

ES6 React.Component no se vincula automáticamente con los métodos. Debes vincularlos 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);el constructor.

Otro son las funciones de flecha 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()
}

Funciones Fat Arrow

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

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

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

También he usado:

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

Debe notar que thisdepende de cómo se invoque la función, es decir: cuando se llama a una función como método de un objeto, thisse establece en el objeto al que se llama el método.

thises accesible en el contexto JSX como su objeto componente, por lo que puede llamar al método deseado en línea como thismétodo.

Si solo pasa referencia a la función / método, parece que reaccionar lo invocará como función independiente.

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

Si está utilizando babel, puede vincular 'esto' con el operador de vinculación ES7 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>
    )
  }

}

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

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

en mi caso esta fue la solución = () => {}

methodName = (params) => {
//your code here with this.something
}

En mi caso, para un componente sin estado que recibió la referencia con forwardRef, tuve que hacer lo que se dice aquí https://itnext.io/reusing-the-ref-from-forwardref-with-react-hooks-4ce9df693dd

A partir de esto (onClick no tiene acceso al equivalente de 'this')

const Com = forwardRef((props, ref) => {
  return <input ref={ref} onClick={() => {console.log(ref.current} } />
})

A esto (funciona)

const useCombinedRefs = (...refs) => {
  const targetRef = React.useRef()

  useEffect(() => {
    refs.forEach(ref => {
      if (!ref) return

      if (typeof ref === 'function') ref(targetRef.current)
      else ref.current = targetRef.current
    })
  }, [refs])

  return targetRef
}

const Com = forwardRef((props, ref) => {
  const innerRef = useRef()
  const combinedRef = useCombinedRefs(ref, innerRef)

  return <input ref={combinedRef } onClick={() => {console.log(combinedRef .current} } />
})