ref 没有引用数组中的正确项答案

【问题标题】：ref not referencing correct item in arrayref 没有引用数组中的正确项
【发布时间】：2019-04-12 05:44:12
【问题描述】：

这个问题可能是因为我对refs 缺乏了解。我有这个容器，我从一个数组中渲染。

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

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

    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>

【问题讨论】：

什么是ref？您每次都将复制文本设置为该文本
对不起，这还不够清楚。我根据onMouseEnter 将引用存储到状态，然后我使用this.state.ref 复制为文本。那是不正确的文本，但总是抓取相同的文本。 @AndyRay

标签： javascript arrays reactjs ref

【解决方案1】：

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

ref={this.textRef}

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

您应该为每个元素创建一个单独的 ref。在this Github issue 上有一些关于如何执行此操作的建议。

【讨论】：