Tengo objetos almacenados en mi estado (workitems) con diferentes atributos como id, título, descripción, etc. Los mapeo en mi render en una tabla para hacerlos visibles. Hasta aquí todo bien. Pero cuando intento agregar un "onClick" dentro de la función de mapa, no solo se activará para el elemento específico en el que se hizo clic, sino que también se activará todo objeto de elementos de trabajo en el mapa.
En mi render;
{workitem.company ? workitem.company + " - " : ""}
<a href={workitem.url} target="_blank">{workitem.title}</a>
<div className="description pt-2" onClick= {this.descriptionPopOut(workitem.description)> // My onclick function
<strong>Description: </strong>
{workitem.description ? this.trimWord(workitem.description.replace("...", ""), 850, "...")
: ""}{" "}
...
</div>
OnClick conducirá a una función muy simple que tiene una alerta, y tomará la descripción del objeto como entrada.
descriptionPopOut = (description) => {
alert(description);
}
Lo anterior hará que la alerta aparezca con toda la propiedad de descripción del objeto, y no para el elemento específico en el que se ha hecho clic. ¿Hay alguna forma de resolver esto?
3 respuestas
Es porque en cada render su función está llamando, es decir
this.descriptionPopOut(workitem.description)
. Mientras desea llamar cuando hace clic. Puede vincular la función para poder usarla más tarde cuando haga clic en:
this.descriptionPopOut.bind(this, workitem.description)
O puede usar la función de flecha gruesa para devolver la función, es decir
onClick = {() => this.descriptionPopOut(workitem.description)>
(Se asegura de que crea una referencia de función y cuando hace clic en ella, invoca su función con un parámetro específico)
El problema es que está llamando a su función incorrectamente.
No hagas esto onClick = {this.descriptionPopOut(workitem.description)>
Como quieres pasar un parámetro haz esto
onClick = {() => this.descriptionPopOut(workitem.description)>
Estás llamando a la función en cada iteración.
Intenta hacer esto:
this.descriptionPopOut.bind(this, workitem.description)
Preguntas relacionadas
Nuevas preguntas
javascript
Para preguntas sobre la programación en ECMAScript (JavaScript / JS) y sus diversos dialectos / implementaciones (excepto ActionScript). Incluya todas las etiquetas relevantes en su pregunta; por ejemplo, [node.js], [jquery], [json], etc.