Necesito cambiar el texto interno de un botón que representa una clase. Por eso, cuando uso la palabra clave this , React imagina que quiero pasar el objeto de esa clase en lugar del elemento en sí.
Aquí tengo mi ejemplo de código React que no funciona:
class Component extends React.Component { helloWorld(element) { element.innerText = 'Hello Wolrd!'; } render() { return ( <button onClick={this.helloWorld(this)}>Change it!</button> ) } }Y aquí tengo un código JavaScript vanila que obtiene el resultado esperado
<button onclick=helloWorld(this)>Change it!</button> <script> function helloWorld(element) { element.innerText='Hello World!'; } </script>La palabra clave this en un componente React se refiere al componente en sí mismo como lo adivinó. Debe agregar un evento de parámetro al método onClick:
<button onClick={(e) => this.helloWorld(e.target)}>Change it!</button>