Как добавлять/удалять класс при наведении?

Question

[art style]

items.map( el => <div className={добавить класс сюда} onMouseEnter={??????}><img src={el}/></div> )

рендерю список с картинками
нужно при onMouseEnter добавлять класс и сохранять его активным до следующего ивента onMouseEnter на другом элементе
а потом удалять у предыдущего и добавлять к текущему
как это сделать?

Answer 1

[Чипекве]

Нужно сохранять в состоянии элемент при наведении на него через (onMouseEnter).

А в className проверять, совпадает ли этот элемент и тот, что в состоянии. И если совпадает, добавлять ему нужный класс, иначе null.

const [currentActive, setActive] = useState()
Внутри скобок useState указываем элемент, если нужно задать его по умолчанию активным или оставляем их пустыми.

className={currentActive === el ? "active" : null}
В элементе прописываем выбор класса в зависимости от состояния.

onMouseEnter={() => setActive(el)}
Меняем состояние при наведении.

Comments

[art style]

ага вчера весь день думал в этом ключе, так ни к чему и не пришел ))

[art style]

действительно так тоже работает

[art style]

а как сунуть первый элемент чтоб он был по умолчанию активным?

[Чипекве]

const [currentActive, setActive] = useState('первый элемент')

[art style]

Чипекве, это понятно =) а как его подтянуть то туда ? "первый элемент", как его ввзять то, где ссылка на него?

[Чипекве]

Есть же список элементов items

items.map( el => вот какое значение el у первого элемента, такое и нужно передать в useState()

[art style]

Чипекве, по факту это просто список ссылок которые я тяну из базы, из них я делаю элементы. поэтому нужно получить элемент когда он уже готов после рендера, надо addeventlistener вызывать или ref юзать походу

[Чипекве]

useState() сохраняет в currentActive просто значение, в вашем случае ссылку из items.

То есть эта ссылка как бы служит уникальным идентификатором элемента.

Если ссылка на первый элемент заранее неизвестна, можно просто сделать useState(items[0])

[art style]

Чипекве, фуф. проблема была что функция асинхронная и изначально items были Undefied поборол так что переделал код и переписал в useEffect [items] теперь работает
спасибо )

Answer 2

[art style]

const [obj, setObj] = useState(null);
let classRef = useRef([]);
function testfunc(index, e) {
    if (obj !== null) {
      classRef.current[obj].classList.remove("img45test");
    }
    e.currentTarget.classList.add("img45test");
    setObj(index);
  }

в общем как то так

в итерируемом элементе прописать ref={(el) => (classRef.current[index] = el)}
1. пихаем все элементы в useRef
2. далее при первом наведении состояние = Null значит просто добавляем класс и пишем индекс
3. второе наведение с помощью рефа убираем класс у элемента с предыдущем индексом и добавляем к текущему, и опять пишем индекс
4. повторяем по кругу
честно сам не понял как к этому пришел
осталось как то по дефолту сделать сделать элемент с индексом 0 в фокусе со старта

Comments

[Чипекве]

Здесь не нужен ref. Реакт сам поменяет классы при изменении состояния.

Дополнил свой ответ.

[art style]

Чипекве, но в итоге, если я захочу при наведении использовать ссылку этого элемента чтобы рендерить его в другом компоненте(соседнем) все равно придется делать useRef?

[Чипекве]

useRef используется как крайний случай для доступа к элементу, а не для его рендеринга в другом месте.