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?

0
Arte 28 oct. 2019 a las 10:39

3 respuestas

La mejor respuesta

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)

1
Shubham Verma 28 oct. 2019 a las 07:58

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

1
Atin Singh 28 oct. 2019 a las 07:50

Estás llamando a la función en cada iteración.

Intenta hacer esto:

this.descriptionPopOut.bind(this, workitem.description)
1
dmitri7 28 oct. 2019 a las 07:50