reactjs - 在悬停时为从数组呈现的列表项渲染单个图标答案

【问题标题】：reactjs - Render single icon on hover for list item rendered from arrayreactjs - 在悬停时为从数组呈现的列表项渲染单个图标
【发布时间】：2018-11-07 17:24:25
【问题描述】：

我有这种卡片是从一组对象中渲染出来的。

父组件：

[{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}
   />
 )}

结果是包含 3 个链接的 4 张卡片。每次我将鼠标悬停在链接上时，我都希望显示“复制到剪贴板”图标。但是，当我将鼠标悬停在任何项目上时，它会将isHovering 设置为true，从而使所有图标都可见。理想情况下，我只希望我悬停的链接的图标变得可见。谁能帮我找出更好的解决方案或改进我已经编写的代码。

非常感谢！

【问题讨论】：

标签： javascript css reactjs hover

【解决方案1】：

您可以将一个对象保持在您的状态而不是布尔值，它有一个键来指示将该特定键作为索引的对象是否悬停。

示例

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>

【讨论】：

感谢您及时详细的回复。我试图实现这一点。我在父组件上没有我的地图，实际上我在我的子组件上有它。在这种情况下，我将如何处理isHovered[index]。
@rowmna 不客气。我不太确定我是否理解。也许您可以在每个子组件中拥有一个单独的状态，而不是 isHovering 属性？
什么意思？我想我几乎可以正常工作了，从技术上讲，这就是我正在寻找的东西，所以值得称赞！我的父组件是一个容器（类组件），它从减速器接收道具，这为我提供了该结构中的有效负载。我将整个数组传递给我的子组件（无状态功能）。在我的子组件中，我执行循环和分配。希望更清楚一点
仅供参考，我按照您的建议将状态降低到子组件并且效果很好。再次感谢您的意见！ @Tholle

【解决方案2】：

在数组的项目上动态创建属性 isHovered 并且 onMouseHover 传递您在 .map 中获得的项目，现在切换 isHovered 属性。现在应该可以工作了。

【讨论】：