Зависимый выпадающий список в React
Сегодня я хочу рассказать Вам о том, как реализовать зависимый выпадающий список с помощью React. Суть данного решения заключается в том, что при изменении значения в некотором списке - все зависимые от него списки поменяют свое значение. Далее я приведу пример кода с комментариями:
файл package.json
В пример используются библиотеки react, react-dom, а также сборщик модулей parcel. Секция scripts содержит команду watch для запуска сервера разработки.
{
"name": "react-dependent-select",
"version": "1.0.0",
"main": "index.js",
"license": "MIT",
"scripts": {
"watch": "npx parcel index.html"
},
"devDependencies": {
"parcel-bundler": "^1.12.4"
},
"dependencies": {
"react": "^17.0.1",
"react-dom": "^17.0.1"
}
}
index.html
Для стилизации используется Bootstrap 4.5.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>React Dependent Select</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
</head>
<body>
<div id="root"></div>
<script src="./index.js"></script>
</body>
</html>
index.js
import ReactDOM from 'react-dom';
import React, {useState, useEffect} from 'react';
// данные для примера, которые вообще-то должны браться из базы данных, например.
// содержат список категории и моделей
const data = [
{
id: 1,
name: 'Легковые',
models: [
{
id: 1,
name: 'Alfa Romeo'
},
{
id: 2,
name: 'Aston Martin',
},
{
id: 3,
name: 'Aston Martin',
},
{
id: 4,
name: 'Bentley',
},
]
},
{
id: 2,
name: 'Грузовые',
models: [
{
id: 1,
name: 'КамАЗ',
},
{
id: 2,
name: 'ГАЗ',
},
{
id: 3,
name: 'ЗИЛ',
},
{
id: 4,
name: 'УРАЛ',
},
]
}
];
// компонент пользовательского выпадающего списка
const CustomSelect = ({ id, options, onChange }) => {
return (
<select className="custom-select" id={id} onChange={onChange}>
{ options.map((option, index) =>
<option key={id + index} value={option.id}>{option.name}</option>
) }
</select>
)
}
// главный компонент приложения
const App = () => {
const [ categories, setCategories ] = useState([]); // хранилище категорий
const [ models, setModels ] = useState([]); // хранилище моделей
// при первой загрузке приложения выполнится код ниже
useEffect(() => {
// устанавливаем категории
setCategories(data.legnth > 0 && data);
// и модели из первой категории по умолчанию
setModels(data.length > 0 && data[0].models && data[0].models.length > 0);
}, []);
// при выборе нового значения в категории
const onCategoriesSelectChange = (e) => {
// преобразуем выбранное значение опции списка в число - идентификатор категории
const categoryId = parseInt(e.target.options[e.target.selectedIndex].value);
// получаем из массива категорий объект категрии по соответствующему идентификатору
const category = categories.find(item => item.id === categoryId);
// выбираем все модели в категории, если таковые есть
const models = category.models && category.models.length > 0
? category.models
: [{ id: 0, name: 'Нет моделей', items: [] }];
// меняем модели во втором списке
setModels(models);
}
return (
<div className="container mt-5">
<div className="row">
<div className="form-group col-md-6">
<label htmlFor="category">Категории</label>
<CustomSelect id="category" options={categories} onChange={onCategoriesSelectChange}/>
</div>
<div className="form-group col-md-6">
<label htmlFor="model">Марки</label>
<CustomSelect id="model" options={models}/>
</div>
</div>
</div>
);
};
ReactDOM.render(<App />, document.getElementById('root'))
Создайте все файлы в некоторой директории с указанным содержимым. Затем выполните следующие команды:
$ npm install # установит необходимые пакеты
$ npm run watch # запустить сервер разработки
Таким образом, мы создали зависимый выпадающий список в React.
-
Создано 19.11.2020 16:59:04
-
Михаил Русаков
Комментарии (0):
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.