Как реализовать многоуровневый выпадающий список на react.js?

Пользователь

от enid , в категории: JavaScript , 2 года назад

Как реализовать многоуровневый выпадающий список на react.js?

Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp

2 ответа

Пользователь

от jamey.kohler , 2 года назад

@enid 

Для реализации многоуровневого выпадающего списка на React.js можно использовать компоненты и стилизацию с помощью CSS. Вот пример реализации:

  1. Создайте компонент Dropdown с помощью функции-конструктора React:
 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
import React, { useState } from 'react';

function Dropdown({ options }) {
  const [value, setValue] = useState(null);
  const [isOpen, setIsOpen] = useState(false);

  const handleOptionClick = (option) => {
    setValue(option);
    setIsOpen(false);
  };

  return (
    <div className="dropdown">
      <div className="dropdown__toggle" onClick={() => setIsOpen(!isOpen)}>
        {value ? value.label : 'Select an option'}
      </div>
      {isOpen && (
        <ul className="dropdown__options">
          {options.map((option) => (
            <li key={option.value} onClick={() => handleOptionClick(option)}>
              {option.label}
            </li>
          ))}
        </ul>
      )}
    </div>
  );
}

export default Dropdown;


  1. Добавьте стилизацию с помощью CSS:
 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
.dropdown {
  position: relative;
}

.dropdown__toggle {
  display: inline-block;
  padding: 8px 16px;
  background-color: #eee;
  border: 1px solid #ccc;
  border-radius: 4px;
  cursor: pointer;
}

.dropdown__options {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
  background-color: #fff;
  border: 1px solid #ccc;
  border-top: none;
  border-radius: 0 0 4px 4px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.dropdown__options li {
  padding: 8px 16px;
  cursor: pointer;
}

.dropdown__options li:hover {
  background-color: #f1f1f1;
}


  1. Для создания многоуровневого выпадающего списка можно добавить в options объекты с подмассивами, например:
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
const options = [
  {
    label: 'Option 1',
    value: 'option1',
    children: [
      {
        label: 'Suboption 1.1',
        value: 'suboption1.1',
      },
      {
        label: 'Suboption 1.2',
        value: 'suboption1.2',
      },
    ],
  },
  {
    label: 'Option 2',
    value: 'option2',
  },
];


  1. Измените компонент Dropdown так, чтобы он мог рендерить подуровни вложенности children:
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
import React, { useState } from 'react';

function Dropdown({ options }) {
  const [value, setValue] = useState(null);
  const [isOpen, setIsOpen] = useState(false);

  const handleOptionClick = (option) => {
    if (option.children) {
      setIsOpen(!isOpen);
    } else {
      setValue(option);
      setIsOpen(false);
    }
  };

  const renderOptions = (options) => {
    return (
      <ul className="dropdown__options">
       


Пользователь

от jaren , 7 месяцев назад

@enid 

1
2
3
4
5
6
7
  {options.map((option) => (
    <li key={option.value} onClick={() => handleOptionClick(option)}>
      {option.label}
      {isOpen && option.children && renderOptions(option.children)}
    </li>
  ))}
</ul>


); };


return ( <div className="dropdown__toggle" onClick={() => setIsOpen(!isOpen)}> {value ? value.label : 'Select an option'} {isOpen && renderOptions(options)} ); }


export default Dropdown;


При такой реализации, при клике на опцию, которая имеет подуровни вложенности (children), компонент Dropdown будет отображать их. Вы можете доработать этот код для более сложных структур и стилей выпадающего списка в зависимости от ваших потребностей.