Выпадающие меню — важнейший компонент веб-разработки, позволяющий пользователям выбирать вариант из списка. В этой статье мы рассмотрим различные методы программного выбора значения в раскрывающемся меню с помощью Semantic UI React. Независимо от того, являетесь ли вы новичком или опытным разработчиком, это руководство даст вам знания, которые помогут вам легко работать с элементами раскрывающегося меню в ваших веб-приложениях.

Метод 1: использование управления состоянием (useState Hook)
Один из самых простых способов управления выбранным значением раскрывающегося меню — использование управления состоянием. В Semantic UI React этого можно добиться, используя хук useState. Давайте посмотрим пример:

import React, { useState } from 'react';
import { Dropdown } from 'semantic-ui-react';
const MyDropdownMenu = () => {
  const options = [
    { key: '1', value: 'option1', text: 'Option 1' },
    { key: '2', value: 'option2', text: 'Option 2' },
    { key: '3', value: 'option3', text: 'Option 3' },
  ];
  const [selectedValue, setSelectedValue] = useState('');
  const handleDropdownChange = (event, data) => {
    setSelectedValue(data.value);
  };
  return (
    <Dropdown
      placeholder="Select an option"
      options={options}
      value={selectedValue}
      onChange={handleDropdownChange}
    />
  );
};

В приведенном выше примере мы создаем компонент MyDropdownMenu, который поддерживает состояние selectedValueс помощью ловушки useState. Функция handleDropdownChangeвызывается всякий раз, когда изменяется значение раскрывающегося списка, соответствующим образом обновляя состояние.

Метод 2: использование ссылок
Другой подход к выбору значения в раскрывающемся меню Semantic UI React — использование ссылок. Ссылки предоставляют возможность прямого доступа к элементам DOM и их изменения. Вот пример:

import React, { useRef, useEffect } from 'react';
import { Dropdown } from 'semantic-ui-react';
const MyDropdownMenu = () => {
  const dropdownRef = useRef(null);
  useEffect(() => {
    // Set the initial selected value
    dropdownRef.current.state.value = 'option2';
  }, []);
  return (
    <Dropdown
      ref={dropdownRef}
      placeholder="Select an option"
      options={[
        { key: '1', value: 'option1', text: 'Option 1' },
        { key: '2', value: 'option2', text: 'Option 2' },
        { key: '3', value: 'option3', text: 'Option 3' },
      ]}
    />
  );
};

В этом примере мы создаем dropdownRefс помощью хука useRef. Внутри хука useEffect мы устанавливаем начальное выбранное значение, напрямую изменяя состояние раскрывающегося компонента с помощью dropdownRef.current.state.value.

Метод 3: использование управляемых компонентов
Semantic UI React также позволяет вам управлять выбранным значением раскрывающегося меню с помощью управляемых компонентов. Вот пример:

import React, { useState } from 'react';
import { Dropdown } from 'semantic-ui-react';
const MyDropdownMenu = () => {
  const options = [
    { key: '1', value: 'option1', text: 'Option 1' },
    { key: '2', value: 'option2', text: 'Option 2' },
    { key: '3', value: 'option3', text: 'Option 3' },
  ];
  const [selectedValue, setSelectedValue] = useState('');
  const handleDropdownChange = (event, data) => {
    setSelectedValue(data.value);
  };
  return (
    <Dropdown
      placeholder="Select an option"
      options={options}
      selection
      value={selectedValue}
      onChange={handleDropdownChange}
    />
  );
};

В этом примере мы используем свойство selectionв компоненте Dropdown, чтобы указать, что это должен быть контролируемый компонент. Выбранное значение сохраняется в состоянии selectedValue, которое обновляется функцией handleDropdownChange.

В этой статье мы рассмотрели три различных метода выбора значения в раскрывающемся меню Semantic UI React. Используя управление состоянием с помощью перехватчика useState, ссылок или контролируемых компонентов, вы можете легко контролировать выбранное значение и улучшать взаимодействие с пользователем ваших веб-приложений.

Не забудьте выбрать метод, который лучше всего соответствует требованиям вашего конкретного проекта. Приятного кодирования!