想要一次只定位一個 div，懸停的 div 而不是 ReactJS 中的其他兄弟 div？

Question

我有一個獨特的場景，但我無法理解這一點。

當我在一個 DIV 上使用 hover 時，它會同時選擇同級 DIVS。 我不想要這種行為。

我只想 select 懸停的 DIV。

如何在 ReactJS 中實現這一點？ 工作代碼如下所示。

應用程序.js

import React,{useState} from 'react';
import "./App.css";

const App = () => {
    const [hover, setHover] = useState(false);

    const texts = ["Arjun", "Andy"];
    let cclass = hover ? "item itemHover":"item";
    return (
        <div className="wrapper">
            {
                texts.map((t, i) => (
                    <div className={cclass} key={i} onMouseEnter={() => setHover(true)}
                         onMouseLeave={() => setHover(false)}>
                        {t}
                    </div>
                ))
            }
        </div>
    )
}
export default App;

應用程序.css

.wrapper{
  width: 60%;
  margin: 10rem auto;
  border: 1px solid;
  display: flex;
}

.item{
  width: 50%;
  border: 1px solid grey;
  height: auto;
  padding: 2rem 3rem;
}

.itemHover{
  background: grey;
}

Answer 1

App中的hover state對於兩個div都是通用的。 要使其工作，您需要為每個div單獨設置hover state。 為此，創建一個新組件TextDiv

import React, {useState} from "react";
import "./styles.css";

export default function TextDiv({t}) {
  const [hover, setHover] = useState(false);

    let cclass = hover ? "item itemHover":"item";
    return (
      <div className={cclass} onMouseEnter={() => setHover(true)}
            onMouseLeave={() => setHover(false)}>
          {t}
      </div>
    )
}

並更改App.js文件

import React, {useState} from "react";
import TextDiv from './TextDiv'
import "./styles.css";

export default function App() {
    const texts = ["Arjun", "Andy"];
    return (
        <div className="wrapper">
            {
              texts.map((t, i) => (
                <TextDiv t={t} key={i}/>
              ))
            }
        </div>
    )
}

Answer 2

你能用 CSS 做嗎？ CSS 非常簡單。 只需添加以下內容：

.item:hover{
  background: grey;
}