Блог

Главная - Вопросы по программированию - Хотите настроить таргетинг только на один div за раз, на div, который зависает, но не на другой дочерний div в ReactJS?

Хотите настроить таргетинг только на один div за раз, на div, который зависает, но не на другой дочерний div в ReactJS?

#javascript #html #css #reactjs

#javascript #HTML #css — код #reactjs

Вопрос:

У меня уникальный сценарий, но я не могу этого понять.

Когда я навожу курсор на один DIV, он выбирает оба дочерних DIV. Я не хочу такого поведения.

Я хочу выбрать только тот DIV, который находится в наведении курсора мыши.

Как я могу добиться этого в ReactJS ?. Рабочий код приведен ниже.

App.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;

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;
}

Комментарии:

1. Используйте setHover с i которым индекс и уникален для каждого div и переместите let cclass внутрь map и измените его на let cclass = hover === i ? "item itemHover":"item";

2. Лучше всего создать 3 отдельных компонента, каждый со своим собственным hover состоянием, а не отображать все 3 сразу, привязанные к одному и тому же отдельному фрагменту состояния.

Ответ №1:

Состояние наведения в приложении является общим для обоих divs. Чтобы это сработало, вам нужно иметь состояние наведения для каждого отдельного элемента. Для этого создайте новый компонент 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>
    )
}

Ответ №2:

Можете ли вы сделать это с помощью CSS? С CSS все очень просто. Просто добавьте это:

 .item:hover{
  background: grey;
}