Question

此问题可能是由于我对ref缺乏了解而引起的。我有这个我要从数组渲染的容器。

让我们说它将渲染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>

Answer 1

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

ref={this.textRef}

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

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

引用未引用数组中的正确项目

1 个答案: