React 在每个数组项上挂钩 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;

我将鼠标悬停在第二个框上，模态框出现了。

这是您要找的吗？

我改变的地方：

数据数组中的数字值
UseState 为 null

我为什么要更改它？

数组从 0 开始，所以我正在检查 box.number 是否等于索引号（在悬停中存在）。如果是，将出现该框。

React 在每个数组项上挂钩 onHover 模式

React hooks onHover modal on each array item

javascript

reactjs

react-hooks

use-state