使用 React onMouseEnter 和 onMouseLeave 为每个列表项显示不同的图像

Question

我是 React 的新手，在写这篇文章之前，我到处寻找我的问题：我有一个包含四个项目的列表，我想在悬停时为每个项目显示不同的图像。

const [isShown, setIsShown] = useState(false);
  return (
    <div className="App">
      <ul>
        <li>
          <a
            onMouseEnter={() => setIsShown(true)}
            onMouseLeave={() => setIsShown(false)}
            href="/"
          >
            Item1
          </a>
          {isShown && (
            <div style={{ width: `width: 300px` }}>
              <img
                className="image"
                src="https://images.pexels.com/photos/1145720/pexels-photo-1145720.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260"
                alt=""
              />
            </div>
          )}
        </li>
         ...

我对每个 <li> 都使用了这个程序，但无论我悬停在哪个项目上，都会显示所有图像。

有人可以帮助我吗？谢谢

Here例子

更新

我尝试按照 John 的建议使用数组，但我做错了，因为图像显示在一起：

const projects = [
  { id: 1, title: "Item1" },
  { id: 2, title: "Item2" },
  { id: 3, title: "Item3" },
  { id: 4, title: "Item4" }
];

const images = [
  {image: "https://placekitten.com/800/600", id: 1},
  {image: "https://placekitten.com/800/600", id: 2},
  {image: "https://placekitten.com/800/600", id: 3},
  {image: "https://placekitten.com/800/600", id: 4},
];
function Portfolio(props) {
  const [isShown, setIsShown] = useState(false);

  return (
    <section>
      <div className="wrap">
        <div className="container">
          <ul className="wrap">
            {props.projects.map((project, image) => (
              <li key={project.id}>
                <a
                  onMouseEnter={() => setIsShown(true)}
                  onMouseLeave={() => setIsShown(false)}
                  href="/"
                >
                  {project.title}
                </a>
                {isShown && (
                  <img key={image.id} src={image} style={{position: `absoulte` }}/>
                )}
              </li>
            ))}
          </ul>
        </div>
      </div>
    </section>
  );

Answer 1

这是因为您使用同一个标志 isShown 来显示所有图像。您应该做的是将它从 boolean 更改为 int 并为其分配索引。

onMouseEnter={() => setIsShown(1)}
onMouseLeave={() => setIsShown(0)}

..

onMouseEnter={() => setIsShown(2)}
onMouseLeave={() => setIsShown(0)}

... etc

所以对于每张图片，你都会有这样的东西

isShown === 1 && (
  ...code
)

isShown === 2 && (
  ...code
)

这样一来，每张图片都将依赖于一个特定的值，从而使它们彼此独立。

一个小建议。由于您正在打印的代码是多余的，我建议您创建项目的 array 并将它们映射到渲染器上，而不是手动打印每个项目。如果您对此有更多疑问，请告诉我。

更新：

我认为有人误解了我的建议。我现在正在调整你的代码，也许现在它会更清晰。

function Portfolio(props) {
  const [isShown, setIsShown] = useState(false);
  const projects = [
    { id: 1, title: "Item1", image: "https://placekitten.com/800/600" },
    { id: 2, title: "Item2", image: "https://placekitten.com/800/600" },
    { id: 3, title: "Item3", image: "https://placekitten.com/800/600" },
    { id: 4, title: "Item4", image: "https://placekitten.com/800/600" }
  ];

  return (
    <section>
      <div className="wrap">
        <div className="container">
          <ul className="wrap">
            {projects.map((project, image) => (
              <li key={project.id}>
                <a
                  onMouseEnter={() => setIsShown(project.id)}
                  onMouseLeave={() => setIsShown(0)}
                  href="/"
                >
                  {project.title}
                </a>
                {isShown === project.id && (
                  <img src={project.image} style={{position: `absoulte` }}/>
                )}
              </li>
            ))}
          </ul>
        </div>
      </div>
    </section>
  );
}

如果您有任何问题，请告诉我。

使用 React onMouseEnter 和 onMouseLeave 为每个列表项显示不同的图像

Show different images for each list item with React onMouseEnter and onMouseLeave

image

listitem

hover

reactjs