<MyRusakov.ru />

Программирование на C# с Нуля до Гуру

Программирование на C# с Нуля до Гуру

Данный курс научит Вас программировать на языке C#, который является одним из самых востребованных языков программирования в мире. Курс состоит из 7 разделов, в которых Вы с нуля освоите этот язык и сможете создавать самые разные программы для самых разных задач любой сложности.

В курсе Вы получите всю необходимую теоретическую часть, а также увидите массу практических примеров, в том числе, и из моей практики. Дополнительно, почти к каждому уроку идут упражнения.

Помимо самого курса Вас ждут ещё 3 бесплатных ценных Бонуса: «Технология Windows Presentation Foundation», «Создание библиотеки классов» и «Правильная работа со справочником».

Подробнее
Подписка

Подписавшись по E-mail, Вы будете получать уведомления о новых статьях.

Подписка Подписаться

Добавляйтесь ко мне в друзья ВКонтакте! Отзывы о сайте и обо мне оставляйте в моей группе.

Мой аккаунт Мой аккаунт Моя группа
Опрос

Каким движком Вы предпочитаете пользоваться?

Зависимый выпадающий список в React

Зависимый выпадающий список в 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/bootstrap@4.5.3/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.

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

  1. Кнопка:

    Она выглядит вот так: Как создать свой сайт

  2. Текстовая ссылка:

    Она выглядит вот так: Как создать свой сайт

  3. BB-код ссылки для форумов (например, можете поставить её в подписи):

Комментарии (0):

Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.