ReactJS 语义 UI 下拉模块

ReactJS 语义 UI 是一套基于 React 构建的 UI 组件库，提供丰富的基础组件和样式，便于开发者快速构建 Web 应用。其中下拉框组件是常用的交互组件，在 ReactJS 语义 UI 中也有相应的实现。

安装

在使用 ReactJS 语义 UI 下拉框组件之前，需要先安装 ReactJS 和语义 UI。

npm install react semantic-ui-react

使用

引入 ReactJS 和语义 UI 组件后，即可在代码中使用下拉框组件。

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

const ColorDropdown = () => {
  const [selectedValue, setSelectedValue] = useState(null)
  const options = [
    { key: 'red', value: 'red', text: '红色' },
    { key: 'orange', value: 'orange', text: '橙色' },
    { key: 'yellow', value: 'yellow', text: '黄色' },
    { key: 'green', value: 'green', text: '绿色' },
    { key: 'blue', value: 'blue', text: '蓝色' },
    { key: 'purple', value: 'purple', text: '紫色' },
  ]

  const onChange = (event, data) => {
    setSelectedValue(data.value)
  }

  return (
    <Dropdown
      placeholder="选择一种颜色"
      fluid
      search
      selection
      options={options}
      onChange={onChange}
      value={selectedValue}
    />
  )
}

export default ColorDropdown

即可在页面中渲染出一个支持搜索和选项选择的下拉框。

Props 说明

• placeholder: 提示文本
• fluid: 是否使用 full width 样式
• search: 是否支持搜索
• selection: 是否是选择模式
• options: 选项值数组
• onChange: 选项变化回调函数
• value: 当前选中的选项值

具体详情可以参考语义 UI 官方文档中的下拉框组件部分。

总结

ReactJS 语义 UI 下拉框组件提供了简单易用的 API，让开发者更加方便地构建 Web 应用中的交互组件。通过简单的配置，就可以创建一个支持搜索和选项选择的下拉框。在实际开发中，我们可以针对具体业务需求进行二次封装，提高开发的效率和代码的可维护性。