ref 未引用数组中的正确项

Question

这个问题可能是因为我对ref的理解不够。我有一个从数组渲染的容器。

假设它将呈现 4 个容器。每个容器将有 3 个链接。当我将鼠标悬停在其中一个链接上时，剪贴板图标变得可见。使用 react-copy-to-clipboard 库，我将该特定项目的内容复制到剪贴板。但是，我的问题是它只复制第 4 个容器的最后一项，而不是我悬停或选择的那个。我觉得这可能也与索引有关？

我希望有人能解释为什么会这样并帮助我找到解决方案。

    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>

Answer 1

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

ref={this.textRef}

所以最后一个循环迭代将用最后一个元素覆盖引用，所有点击处理程序都将引用它。

您应该为每个元素创建一个单独的引用。 this Github issue.

上有一些关于如何执行此操作的建议

ref 未引用数组中的正确项

ref not referencing correct item in array

javascript

arrays

ref

reactjs