реагировать - отображать один значок при наведении курсора на элемент списка, отображаемый из массива. - PullRequest
Новая
       6

реагировать - отображать один значок при наведении курсора на элемент списка, отображаемый из массива.

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

У меня есть карты такого типа, которые отображаются из массива объектов.

Родительский компонент:

[{foo: 'bar', baz: [{ name: string, path: string: '/'}]

state = {isHovering: false}

handleMouseHover = () => {
    const { isHovering } = this.state;
    this.setState({ isHovering: !isHovering });
}

;

Я передаю handleMouseHover() и isHovering вниз как реквизиты для дочернего компонента.

В результате получается что-то вроде этого:

дочерний компонент 

<LinkContainer
  onMouseEnter={handleMouseHover}
  onMouseLeave={handleMouseHover}
  className="linkContainer"
>

 {isHovering && (
   <FontAwesomeIcon
     icon="copy"
     className="copyIcon"
     onClick={copyToClipboard}
   />
 )}

В результате получено 4 карточки с 3 ссылками. Каждый раз при наведении курсора на ссылку я хочу, чтобы отображался значок копии в буфер обмена. Однако в тот момент, когда я наводю курсор мыши на любой элемент, он устанавливает isHovering в true, что делает все значки видимыми. В идеале я хочу, чтобы значок ссылки, над которой я наведен, стал видимым. Может кто-нибудь помочь мне найти лучшее решение или усовершенствование моего уже написанного кода.

Очень ценится!

Ответы [ 2 ]

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

Вы можете сохранить объект в вашем состоянии вместо логического значения, у которого есть ключ, указывающий, находится ли объект с этим конкретным ключом в качестве индекса или нет.

* ** 1003 тысяча два * Пример 

class App extends React.Component {
  state = {
    arr: [{ text: "foo" }, { text: "bar" }],
    isHovered: {}
  };

  handleMouseEnter = index => {
    this.setState(prevState => {
      return { isHovered: { ...prevState.isHovered, [index]: true } };
    });
  };

  handleMouseLeave = index => {
    this.setState(prevState => {
      return { isHovered: { ...prevState.isHovered, [index]: false } };
    });
  };

  render() {
    const { arr, isHovered } = this.state;

    return (
      <div>
        {arr.map((el, index) => (
          <Child
            onMouseEnter={() => this.handleMouseEnter(index)}
            onMouseLeave={() => this.handleMouseLeave(index)}
            text={el.text}
            isHovering={isHovered[index]}
            key={index}
          />
        ))}
      </div>
    );
  }
}

function Child({ onMouseEnter, onMouseLeave, text, isHovering }) {
  return (
    <div onMouseEnter={onMouseEnter} onMouseLeave={onMouseLeave}>
      {text} {isHovering && " (hovering!)"}
    </div>
  );
}

ReactDOM.render(<App />, document.getElementById("root"));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

<div id="root"></div>
0 голосов
/ 07 ноября 2018

Создайте свойство isHovered для элемента массива динамически, и onMouseHover передаст элемент, который вы получите, в .map, теперь переключите свойство isHovered. Должен работать сейчас.

...