语义UI React -下拉值

语义UI React是一个流行的React UI框架，它提供了许多预定义的组件，使得开发者可以快速构建美观且响应式的网页应用。其中，下拉菜单（Dropdown）组件是一个常用的交互元素，允许用户从一组选项中选择一个值。

基础概念

语义UI React的下拉菜单组件允许你创建一个可点击的元素，当用户点击时，会展示一个包含多个选项的列表。用户可以从这个列表中选择一个选项，选中的值会显示在下拉菜单的触发元素中。

类型

语义UI React的下拉菜单有多种类型，包括但不限于：

基本下拉菜单：最简单的形式，包含一组选项。
分组下拉菜单：允许将选项分组显示。
标签下拉菜单：可以在下拉菜单中添加标签，以提供额外的信息。
搜索下拉菜单：允许用户在展开的下拉列表中进行搜索。

应用场景

下拉菜单广泛应用于各种网页应用中，例如：

表单选择：在表单中让用户从预定义的选项中选择一个值。
导航菜单：作为网站导航的一部分，提供快速访问不同页面的方式。
设置选项：在应用的设置页面中，让用户选择偏好设置。

示例代码

以下是一个使用语义UI React创建基本下拉菜单的示例代码：

import React, { useState } from 'react';
import { Dropdown } from 'semantic-ui-react';

const options = [
  { key: 'option1', value: 'option1', text: 'Option 1' },
  { key: 'option2', value: 'option2', text: 'Option 2' },
  { key: 'option3', value: 'option3', text: 'Option 3' },
];

const DropdownExample = () => {
  const [value, setValue] = useState(options[0].value);

  const handleChange = (event, { value }) => {
    setValue(value);
  };

  return (
    <Dropdown
      selection
      options={options}
      value={value}
      onChange={handleChange}
    />
  );
};

export default DropdownExample;