Tengo un problema aquí con this.greet() no está definido, tengo que vincular el evento onlick directamente para que funcione, ¿alguna idea de cómo solucionarlo?
import React from 'react'; export default class Example1 extends React.Component { constructor() { super(); this.message = { greeting: 'Hello', name: 'World', }; } greet() { const { greeting, name } = this.message; console.log(`${greeting} ${name}!`); } onClick() { try { this.greet(); } catch (e) { console.error('Why have I failed? Can you fix me?'); } } render() { return ( <div> <button onClick={this.onClick}>Greet the world</button> </div> ); } }He intentado muchas otras formas, pero no funcionó de todos modos.
si desea tener "esto" en su componente de clase, debe agregar accesorios dentro de la invocación del constructor y también en el super
constructor(props) { super(props); this.greet = this.greet.bind(this) // need's to be bounded }El problema es this palabra clave. Esto se debe a la forma en this funciona en javascript.
thispierde su contexto cuando se usa en devoluciones de llamada.
Hay dos soluciones para este problema. Pero recomendaría la solución de función de flecha más.
Enlace esto en la devolución de llamada onClick .
onClick() { try { this.greet(); } catch (e) { console.error('Why have I failed? Can you fix me?'); } } render() { return ( <div> <button onClick={this.onClick.bind(this)}>Greet the world</button> </div> ); }Use funciones de flecha para definir devoluciones de llamada (recomendado personalmente)
onClick = () => { try { this.greet(); } catch (e) { console.error('Why have I failed? Can you fix me?'); } } render() { return ( <div> <button onClick={this.onClick}>Greet the world</button> </div> ); }Perdiste this referencia, tienes que vincular tus funciones:
<button onClick={this.onClick.bind(this)}>Greet the world</button>o pasar una función de flecha
<button onClick={() => this.onClick()}>Greet the world</button>