javascript - map 函数中特定项目的 onClick 函数

Question

我的状态(工作项)中存储了具有不同属性(例如 ID、标题、描述等)的对象。我将它们映射到表中的渲染中，以使它们可见。到目前为止，一切都很好。但是，当我尝试在 map 函数内添加“onClick”时，它不仅会触发被单击的特定元素，而且 map 中的所有工作项对象也会触发。

在我的渲染中；

{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 将导致一个非常简单的函数，该函数有一个警报，并将对象描述作为输入。

descriptionPopOut = (description) => {
   alert(description); 
}

上面将使警报弹出，其中包含所有对象描述属性，而不是针对已单击的特定元素。有什么办法可以解决这个问题吗？

Answer 1

因为在每个渲染中您的函数都在调用，即

this.descriptionPopOut(workitem.description)

。当你想打电话的时候就点击一下。您可以绑定(bind)该函数，以便稍后在单击时使用它:

this.descriptionPopOut.bind(this, workitem.description) 

或者您可以使用粗箭头函数返回函数，即

onClick = {() => this.descriptionPopOut(workitem.description)> 

(它确保它创建函数引用，当您单击它时，它会使用特定参数调用您的函数)