时间戳

首页 > 解决方案 > 在 div 上保存信息并在 Click 事件上检索该信息

reactjs - 在 div 上保存信息并在 Click 事件上检索该信息

问题描述

假设我有一个由 5 个整数组成的数组， [1,2,3,4,5] 我迭代数组并创建 5 个 div。在每个 div 上，我想要一个 onClick 处理程序。因此，当我单击一个 div 时，我想检索该数字。

存储信息的最佳方式是什么，以便稍后我可以从处理程序函数中检索它？

我尝试了以下方法并且它正在工作，但我不确定这是否是最好的解决方案，因为在我的应用程序中我将拥有大量这些 div。


const array = [1,2,3,4,5];

// make a closure
function onDivClick(id) {
    return () => {
      console.log(id);
    }
  }


return (

<div> 

{array.map( id => {
   return <div onClick={onDivClick(id)}> ... </div>
})

</div>
)

我还看到了 html 数据属性：

所以我可以存储，然后我可以用event.target.getAttributes('data-id').

还有其他方法吗，哪种方法最好？

标签： reactjs

解决方案

你现在拥有的东西是不行的。{onDivClick(id)}在每次渲染时执行。

相反，id直接将属性添加到 div，并在点击处理程序中访问它。

像这样重写你的点击处理程序：

function handleClick(event) {
  let id = event.target.id;
  console.log(id);
}

并将其附加到 div 上，如下所示：

<div id={id} onClick={handleClick} />

推荐阅读