Как переписать код компонента select?

@Mukzer · Регистрация: 08.09.2018

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

Подскажите как переписать компонент select, что бы он работал не зависимо, если их несколько на странице

Код компонента:

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
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
import { FC, useState, useEffect, useRef } from "react";
import { className } from "../../../app/client/helper.client";
 
interface IOption {
  id: number | string;
  render: () => any;
}
 
interface ISelect {
  optionsList: IOption[];
  defaultValue: IOption;
  getSelectedValue: any;
  absolute?: boolean;
}
 
const Select: FC<ISelect> = ({
  optionsList,
  defaultValue,
  getSelectedValue,
  absolute
}) => {
  const selectRef = useRef(null);
  const optionsRef = useRef(null);
  const [height, setHeight] = useState('0px');
  const [isOpen, setIsOpen] = useState(false);
  const [defaultSelectValue, setDefaultSelectValue] = useState(defaultValue);
 
  useEffect(() => {
    document.addEventListener("mousedown", handleClickOutside);
 
    return () => document.removeEventListener("mousedown", handleClickOutside);
  }, [defaultValue]);
 
  const handleClickOutside = (event) => {
    const path = event.path || (event.composedPath && event.composedPath());
 
    if (!path.includes(selectRef.current)) {
      setIsOpen(false);
    }
  };
 
  useEffect(() => {
    setHeight(isOpen ? '0px' : `${optionsRef.current.scrollHeight}px`);
  }, [isOpen]);
 
  const handleListDisplay = () => {
    setIsOpen(!isOpen);
  };
 
  const handleOptionClick = (selectedValue) => {
    setIsOpen(!isOpen);
    setDefaultSelectValue(selectedValue);
    getSelectedValue(selectedValue);
  };
 
  return (
    <div
      className={`select ${absolute ? '--absolute' : ''}`}
      ref={selectRef}
    >
      <span
        className={isOpen ?  '--open' : ''}
        onClick={handleListDisplay}
      >
        {defaultSelectValue.render()}
      </span>
      <ul ref={optionsRef} style={{ height: height }}>
        {optionsList.map((option) => (
          <li
            key={option.id}
            onClick={() => handleOptionClick(option)}
          >
            {option.render()}
          </li>
        ))}
      </ul>
    </div>
  );
};
 
export default Select;

Стили:

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
.select {
  &.--absolute {
    position: relative;
 
    ul {
      position: absolute;
    }
  }
 
  ul {
    overflow: auto;
    transition: height .3s ease-in-out;
  }
}

Вызов:

JavaScript
1
2
3
4
5
6
7
8
9
10
const selectOptions = [
    { id: "1", render: () => (<div>1111</div>) },
    { id: "2", render: () => (<div>2222</div>) }
  ];
 
<Select
  optionsList={selectOptions}
  defaultValue={selectOptions[0]}
  getSelectedValue={(e) => console.log(e)}
/>

@mr_dramm · 21.11.2022, 16:57

Сообщение от Mukzer

Подскажите как переписать компонент select, что бы он работал не зависимо, если их несколько на странице

Я не вижу тут внешних зависимостей, кроме входных аргументов (пропсов). В чем проблема?

Новые блоги и статьи Все статьи Все блоги /
Уведомление о неверно выбранном значении справочника Maks 06.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "НарядПутевка", разработанного в конфигурации КА2. Задача: уведомлять пользователя, если в документе выбран неверный склад. . .	Установка Qt Creator для C и C++: ставим среду, CMake и MinGW без фреймворка Qt 8Observer8 05.04.2026 Среду разработки Qt Creator можно установить без фреймворка Qt. Есть отдельный репозиторий для этой среды: https:/ / github. com/ qt-creator/ qt-creator, где можно скачать установщик, на вкладке Releases:. . .	AkelPad-скрипты, структуры, и немного лирики.. testuser2 05.04.2026 Такая программа, как AkelPad существует уже давно, и также давно существуют скрипты под нее. Тем не менее, прога живет, периодически что-то не спеша дополняется, улучшается. Что меня в первую очередь. . .	Отображение реквизитов в документе по условию и контроль их заполнения Maks 04.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "ПланированиеСпецтехники", разработанного в конфигурации КА2. Данный документ берёт данные из другого нетипового документа. . .
Фото всей Земли с борта корабля Orion миссии Artemis II kumehtar 04.04.2026 Это первое подобное фото сделанное человеком за 50 лет. Снимок называют новым вариантом легендарной фотографии «The Blue Marble» 1972 года, сделанной с борта корабля «Аполлон-17». Новое фото. . .	Вывод диалогового окна перед закрытием, если документ не проведён Maks 04.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: реализовать программный контроль на предмет проведения документа. . .	Программный контроль заполнения реквизитов табличной части документа Maks 02.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: 1. Реализовать контроль заполнения реквизита. . .	wmic не является внутренней или внешней командой Maks 02.04.2026 Решение: DISM / Online / Add-Capability / CapabilityName:WMIC~~~~ Отсюда: https:/ / winitpro. ru/ index. php/ 2025/ 02/ 14/ komanda-wmic-ne-naydena/