Javascript ref未引用数组中的正确项

这个问题可能是因为我对

ref

s缺乏理解。 我有一个从数组渲染的容器

假设它将渲染4个容器。每个容器将有3个链接。当我将鼠标悬停在其中一个链接上时，剪贴板图标将可见。使用

react copy to clipboard

library，我将特定项目的内容复制到剪贴板。然而，我的问题是，它只是复制第四个容器的最后一项，而不是我悬停或选择的容器。我觉得这可能也与指数有关

我希望有人能澄清为什么会发生这种情况，并帮助我找到解决办法

    handleMouseEnter = index => {
    this.setState(prevState => ({
        isHovered: {
            ...prevState.isHovered,
            [index]: true,
        },
        ref: this.textRef.current.attributes.label.nodeValue,
    }));
};


<LinkContainer className="linkContainer">
  {links.map(({ name, path }, index) => (
    <ul className="styledLinks">
       <li
          onMouseEnter={() => this.handleMouseEnter(index)}
          onMouseLeave={() => this.handleMouseLeave(index)}
       >
       <StyledLinks
         key={name}
         ref={this.textRef}
         value={name}
         label={path}
       />
         {isHovered[index] && (
           <CopyToClipboard
             onCopy={this.copy}
             text={ref}
           >
           <StyledCopyIcon
            icon="copy"
            className="copyIcon"
            copySucces={copySuccess}
            onClick={this.setCopySuccess}
           />
           </CopyToClipboard>
          )}
        </li>
      </ul>
    ))}
  </LinkContainer>

handlemouseinter=index=>{
this.setState（prevState=>({
我发现：{
…我知道了，
[索引]：对，
},
ref:this.textRef.current.attributes.label.nodeValue，
}));
};
{links.map（{name，path}，index）=>(

this.handleMouseCenter（索引）}
onMouseLeave={（）=>this.handleMouseLeave（索引）}
>
{isHovered[index]&&(
)}


))}

您总是覆盖循环中的相同引用：

ref={this.textRef}

因此，最后一次循环迭代将使用最后一个元素覆盖ref，所有单击处理程序都将引用该元素

---

您应该为每个元素创建一个单独的引用。对于如何在上执行此操作，有一些建议。

什么是

ref

？您每次都将复制文本设置为该值。对不起，这不够清楚。我根据mouseenter上的

存储ref to state，然后使用该
this.state.ref
作为文本复制。这是错误的文本，但总是抓住同一个@安德雷