React/ReactJS

Форум программистов и сисадминов Киберфорум

Войти

Регистрация
Восстановить пароль

Константин345

1 / 4 / 5

Регистрация: 17.09.2015

Сообщений: 194

Почему событие onMouseout не работает? Или работает неправильно?

23.02.2023, 21:49. Показов 469. Ответов 0

Метки нет (Все метки)

Сообщение было отмечено DrType как решение

Решение

Студворк — интернет-сервис помощи студентам

В чем проблема? Почему событие

JavaScript
1
onMouseout

в коде ниже не работает так, как следует?
Т.е., мне нужно, чтобы при onMouseout у меня значение one было пустым, т.е. в {one ? one : styles.stels} приходило one в качестве false и применился стиль styles.stels

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
function Catalog() {
  const [one, setOne] = React.useState();
 
  const change = () => {
    setOne(styles.categories);
  };
  const out = () => {
    setOne("");
  };
 
  console.log(one);
  return (
    <div className={styles.container}>
      <div className={styles.title}>
        <h1>Хлеб и выпечка</h1>
        <div className={styles.categorySearch}>
          <div
            onClick={change}
            onMouseout={out}
            className={styles.categorypopular}
          >
            <a onMouseout={alert("222")}>По популярности</a>
          </div>
          <div className={one ? one : styles.stels}>
            <a>По популярности</a>
            <a>По возрастанию цены</a>
            <a>По уменьшению цены</a>
            <a>Сначала обсуждаемые</a>
            <a>Сначала с лучшей оценкой</a>
          </div>
        </div>
      </div>
    </div>
  );
}

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
.categorySearch .stels {
  display: none;
}
 
.categorySearch {
  .categories {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    position: absolute;
    top: 460px;
    margin-left: 25px;
    padding-top: 35px;
    cursor: pointer;
  }
}

Добавлено через 25 минут
Проблема решена)))

onMouseOut) С большой буквы

Лучшие ответы (1)

Сообщение: #16770341

Programming

Эксперт

39485 / 9562 / 3019

Регистрация: 12.04.2006

Сообщений: 41,671

Блог

23.02.2023, 21:49

Ответы с готовыми решениями:

Почему функция работает неправильно: идин раз или дублирует?
Нужно, чтобы при клике по кнопке button в textarea добавлялся текст из value. Работает, но при наборе текста с клавиатуры функция...

Поиск ошибок. Почему код неправильно работает, когда впереди стоят 1 или 2 пробела?
Задание: удалить пробелы в строке. void func(char *from, int n) { __asm { mov edi, from mov esi, from mov...

Почему смена текста работает только один раз? Что неправильно в коде и почему?
Нужно чтобы при щелчке мыши на поверхности кнопки текст метки Label изменялся на текст окна редактора текста (TextBox). partial class...

Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.

inter-admin

Эксперт

29715 / 6470 / 2152

Регистрация: 06.03.2009

Сообщений: 28,500

Блог

23.02.2023, 21:49

Помогаю со студенческими работами здесь

Почему работает на Linux, но не работает на Windows или аномалии wi-fi адаптера
Из заголовка, уже возникает вопрос а такое вообще возможно? Купил на днях usb wi-fi адаптер, не обратив внимание на то что он для 5Ghz...

Не могу понять почему не работает (или правильно не работает)
#include <iostream.h> #include <conio.h> #define N 5 #define M 3 void main() { int a; int i,j; cout<<"nachalnya...

Почему неправильно работает?
Задано текстовый файл А. Создайте новый файл, содержащий числовой массив, элементы которого указывают на длину каждой строки файла А...

Почему цикл работает неправильно?
у меня есть небольшое приложение в котором я хочу вывести при нажатие на члена семьи, все его покупки и сумму, но у меня цыкл работает...

Почему адаптивность работает неправильно?
В браузере масштабирую - сайт правильно реагирует на смену ширины, короче, в браузере все супер. Еще и аддон к фирфоху Web Developer...

Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Web (WebAssembly): Обработчик клика мыши в браузере ПК и касания экрана в браузере на мобильном устройстве 8Observer8 02.02.2026 Содержание блога Для начала пошагово создадим рабочий пример для подготовки к экспериментам в браузере ПК и в браузере мобильного устройства. Потом напишем обработчик клика мыши и обработчик. . .	Философия технологии iceja 01.02.2026 На мой взгляд у человека в технических проектах остается роль генерального директора. Все остальное нейронки делают уже лучше человека. Они не могут нести предпринимательские риски, не могут. . .	SDL3 для Web (WebAssembly): Вывод текста со шрифтом TTF с помощью SDL3_ttf 8Observer8 01.02.2026 Содержание блога В этой пошаговой инструкции создадим с нуля веб-приложение, которое выводит текст в окне браузера. Запустим на Android на локальном сервере. Загрузим Release на бесплатный. . .	SDL3 для Web (WebAssembly): Сборка C/C++ проекта из консоли 8Observer8 30.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .
SDL3 для Web (WebAssembly): Установка Emscripten SDK (emsdk) и CMake для сборки C и C++ приложений в Wasm 8Observer8 30.01.2026 Содержание блога Для того чтобы скачать Emscripten SDK (emsdk) необходимо сначало скачать и уставить Git: Install for Windows. Следуйте стандартной процедуре установки Git через установщик. . . .	SDL3 для Android: Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 29.01.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами. Версия v3 была полностью переписана на Си, в. . .	Инструменты COM: Сохранение данный из VARIANT в файл и загрузка из файла в VARIANT bedvit 28.01.2026 Сохранение базовых типов COM и массивов (одномерных или двухмерных) любой вложенности (деревья) в файл, с возможностью выбора алгоритмов сжатия и шифрования. Часть библиотеки BedvitCOM Использованы. . .	SDL3 для Android: Загрузка PNG с альфа-каналом с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 28.01.2026 Содержание блога SDL3 имеет собственные средства для загрузки и отображения PNG-файлов с альфа-каналом и базовой работы с ними. В этой инструкции используется функция SDL_LoadPNG(), которая. . .

Наверх