1

quería saber como enviar parámetros cuando hago un evento onClick, lo intente haciendo onClick={funcionDeEjemplo('texto')} pero no respeta el onClick y se ejecuta cuando se renderiza el componente, ademas de forma infinita. Pero cuando hago el evento onClick normal: onClick={this.funcionDeEjemplo}si que me realiza el evento correctamente.

Muchas gracias

1

1 respuesta 1

2

Hay que buscar en la doc oficial :)

<button onClick={(e) => this.deleteRow(id, e)}>Delete Row</button>
<button onClick={this.deleteRow.bind(this, id)}>Delete Row</button>

Son dos ejemplos equivalentes.

Pero acá te explico un poco más. En React, cuando en un componente usamos las llaves {} lo que coloquemos dentro es una expresión javascript. Esto es, código javascript que será ejecutado.

En el primer ejemplo, estás creando una función anónima que retorna a su vez la función (o método de la clase del componente) deleteRow, que recibe id y e (el evento), donde "id" puede tener el valor que asignes durante la renderización. Ya que es una arrow function, el contexto de "this" es del elemento padre, o sea de la clase/función del componente.

El segundo ejemplo estás ejecutando directamente la función/método deleteRow pero haces un bind, el propósito del bind (que es propio de JS) es cambiar el contexto de la variable "this" al componente de react (mismo resultado que el primer caso pero implementado diferente).

Ya te imaginarás cómo está declarada la función/método deleteRow, algo como:

deleteRow (id, e) {
  e.preventDefault()
  // do something with id
}

Por lo antes dicho, la razón por la que no funciona con el modo en que colocas en tu pregunta, es que no estás bindeando la variable "this". Como dije antes, esto es propio de JS y no tanto de React.

Te sugiero que le des un vistazo a esta lectura, te servirá bastante para subir un nivel más en la programación con React :)

Referencia:

doc oficial de react

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.