对每个数组项响应钩子onHover模型

Question

模式(绿色框)需要出现在每个独立的红色框下，一旦有一个onHover事件。目前，绿色盒子只出现在同一区域。因此，在每个不同的红色盒子下，它都是一个模态开口。提前感谢

沙箱在这里https://codesandbox.io/s/modal-array-ccpso3?file=/src/App.js:0-1283

import React, { useState } from "react";
import roundFace from "../src/sad.png";

const data = [
  { image: roundFace, number: 1 },
  { image: roundFace, number: 2 },
  { image: roundFace, number: 3 }
];

export const Items = (imageUrl, heading) => (
  <div className="flex flex-col">
    <div className="px-2 py-2 mx-auto align-middle">
      <div className="w-16 h-16 border-solid border-4 border-red-600">
        <img className="" src={imageUrl} alt="" />
        <div className={heading} />
      </div>
    </div>
  </div>
);
export const App = () => {
  const [Hover, setHover] = useState(false);

  return (
    <div className="">
      <div className="grid gap-x-8 gap-y-4 grid-cols-3 px-2 py-2">
        {data &&
          data.length > 0 &&
          data.map((box, index) => (
            <div key={`-${index}`}>
              <div
                onMouseEnter={() => setHover(true)}
                onMouseLeave={() => setHover(false)}
              >
                <Items imageUrl={box.image} />
              </div>
              {box.number}
            </div>
          ))}
        {Hover && (
          <p className="w-16 h-16 border-solid border-4 border-green-600">
            Hi!
          </p>
        )}
      </div>
    </div>
  );
};

export default App;

import * as React from "react";
import { render } from "react-dom";

import App from "./App";

const rootElement = document.getElementById("root");
render(<App />, rootElement);

Answer 1

我修改了App.js，它就在这里。

import React, { useState } from "react";
import roundFace from "../src/sad.png";

const data = [
  { image: roundFace, number: 0 },
  { image: roundFace, number: 1 },
  { image: roundFace, number: 2 }
];

export const Items = (imageUrl, heading) => (
  <div className="flex flex-col">
    <div className="px-2 py-2 mx-auto align-middle">
      <div className="w-16 h-16 border-solid border-4 border-red-600">
        <img className="" src={imageUrl} alt="" />
        <div className={heading} />
      </div>
    </div>
  </div>
);
export const App = () => {
  const [Hover, setHover] = useState(null);

  return (
    <div className="">
      <div className="grid gap-x-8 gap-y-4 grid-cols-3 px-2 py-2">
        {data &&
          data.length > 0 &&
          data.map((box, index) => (
            <div key={`attendees-${index}`}>
              <div
                onMouseEnter={() => setHover(index)}
                onMouseLeave={() => setHover(false)}
              >
                <Items imageUrl={box.image} />
              </div>
              {box.number}
              <span>{Hover === box.number ? <p className="w-16 h-16 border-solid border-4 border-green-600">Wow</p> : ""}</span>

              {/* {Hover && (
              )} */}
            </div>
          ))}
      </div>
    </div>
  );
};

export default App;

我在第二个盒子上盘旋，模态出现了。

这就是你要找的吗？

​

​

我已经改变的事情：

数据数组中的

• Number值
• UseState to null

我为什么要改变它？

数组从0开始，因此，我正在检查box.number是否等于索引号(在Hover中)。如果是，盒子就会出现。