ссылка не ссылается на правильный элемент в массиве - PullRequest
Новая
       8

ссылка не ссылается на правильный элемент в массиве

0 голосов
/ 08 ноября 2018

Эта проблема, вероятно, возникает из-за моего непонимания 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>

1 Ответ

0 голосов
/ 08 ноября 2018

Вы всегда перезаписываете одну и ту же ссылку в цикле: 

ref={this.textRef}

Таким образом, последняя итерация цикла перезапишет ссылку последним элементом, и все обработчики кликов будут ссылаться на нее.

Вы должны создать отдельную ссылку для каждого элемента. Есть несколько советов, как это сделать на этой проблеме Github .

...