在反应中将类添加到数组的一个元素

Question

当该元素悬停时，我想将样式或类传递给数组的元素。我的问题是：每当我悬停该数组的一个元素时，都会将类或样式添加到一个数组的每个元素中，而我只想将样式或类应用于悬停时的元素。在这里，我希望标签 P 在其父 DIV 悬停时出现。

注意：我确实尝试过使用 id，但我找不到在函数中添加类的方法。似乎反应是在渲染方法中处理这种变化更为常见。那么，如果不将这种样式或类传播到数组的每个元素，我该怎么做呢？非常感谢。

 this.state = {
    meals: [
    {
    src: meal1,
    id: "meal1",
    alt: "Burger",
    name: "Name1",
    description: [
    "Thick slices of French",
    "bread stuffed with cream cheese",
    " fried in egg",
    "Accompanied by Maine maple syrup",
    "sausage links"
    ]
    },
        {
          src: meal2,
          id: "meal2",
          alt: "Sandtwitch",
          name: "Name2",
          description: [
            "Cheddar and Monterey Jack cheesesslices of French",
            "on grilled toast",
            " fried in egg",
            "Accompanied by Maine maple syrup",
            "sausage links",
            "warm tomato soup or Gazpacho"
          ]
        },
        {
          src: meal3,
          id: "meal3",
          alt: "Sandtwitch",
          name: "Name3",
          description: [
            "Cheddar and Monterey Jack cheesesslices of French",
            "on grilled toast",
            " fried in egg",
            "Accompanied by Maine maple syrup",
            "sausage links",
            "warm tomato soup or Gazpacho"
          ]
        } 
      ],
      onHover: false
    };
  }

  paragraphAppear = () => {
    this.setState({
      onHover: !this.state.onHover
    });
  };

  render() {
    return (
      <section className="gallery_section">
        <h1> Some pics of our plats</h1>
        <div className={"meal_container"}>
          {this.state.meals.map((element, index) => (
            <figure key={element.id} onMouseOver={this.paragraphAppear}>
              <img src={element.src} onClick={this.effectPictures} />
              <div
                id={element.id}
                style={
                  this.state.onHover
                    ? { display: "block" }
                    : { display: "none" }
                }
              >
                <p>{element.name}</p>
              </div>
            </figure>
          ))}
        </div>
      </section>
    );
  }
}

Answer 1

首先，您还需要跟踪悬停元素的 ID。为此，首先更改 paragraphAppear 方法以接受如下元素 ID，并将该元素 ID 也存储为状态变量。

paragraphAppear = (elementID) => {
    this.setState({
      onHover: !this.state.onHover,
      hoverID: elementID
    });
};

然后从 onMouseOver 回调中传递元素 ID，如下所示。

<figure key={element.id} onMouseOver={() => this.paragraphAppear(element.id)}>

最后，检查是否启用了悬停以及应用样式时的元素ID。

<div
    id={element.id}
    style={
        (this.state.onHover && (this.state.hoverID === element.id))
            ? { display: "block" }
            : { display: "none" }
    }>

在此处查看有效的code sandbox sample（查看Test.js）