使用 React-select 和 Material UI 创建功能性 React.js 下拉菜单

2024年 5月 31日下午1:49 • 开发教程 • 阅读 35

您可以将“react-select”库与“Material UI 组件”结合使用，使用 Material React.js 创建功能齐全的下拉菜单。

这是分步指南：

步骤一：使用Vite创建React.js项目

让我们通过以下命令使用 Vite 创建一个基本的 React.js 样板：

npm create vite@latest dropdown-app -- --template react

它将创建一个名为“dropdown”的 React项目文件夹。

进入项目文件夹并安装依赖项：

cd dropdown-app

npm install

第2步：安装react-select和Material UI

您可以使用以下命令安装react-select和Material UI库：

npm install @mui/material @emotion/react @emotion/styled react-select --save

第 3 步：导入库并定义选项

替换 src/App.jsx 文件中的以下代码：

import React, { useState } from 'react';
import { Typography, Box } from '@mui/material';
import Select from 'react-select';

const programmingLanguages = [
  { label: 'Python', value: 1 },
  { label: 'JavaScript', value: 2 },
  { label: 'PHP', value: 3 },
  { label: 'Go', value: 4 },
  { label: 'Rust', value: 5 },
  { label: 'Dart', value: 6 },
  { label: 'Ruby', value: 7 },
];

在此代码中，我们导入了 React 库和 useState 挂钩。

useState 挂钩用于管理所选项目的状态。

Typography Material UI 组件用于文本样式设置，Box 提供具有内置布局属性的容器。

还导入了“react-select”库，用于创建下拉菜单。

第四步：编写功能组件App()

以下是 App.jsx 文件的完整代码：

// App.jsx

import React, { useState } from 'react';
import { Typography, Box } from '@mui/material';
import Select from 'react-select';

const programmingLanguages = [
  { label: 'Python', value: 1 },
  { label: 'JavaScript', value: 2 },
  { label: 'PHP', value: 3 },
  { label: 'Go', value: 4 },
  { label: 'Rust', value: 5 },
  { label: 'Dart', value: 6 },
  { label: 'Ruby', value: 7 },
];

const App = () => {
  const [selected, setSelected] = useState([]);

  const handleChange = (selectedOptions) => {
    setSelected(selectedOptions || []);
  };

  return (
    
      
        Pick Programming Languages:
      
      
        
      
      {selected.length > 0 && (
        
          
            Selected: {selected.map((option) => option.label).join(', ')}
          
        
      )}
    
  );
};

export default App;

我们创建了一个代表整个应用程序的 App.jsx 功能组件。

在上面的代码中，我们使用“useState()”函数将“selected”状态变量初始化为空数组。该数组将存储下拉列表中的选项值。

当下拉值改变时，handleChange()函数被触发。

然后，我们以字符串格式显示下拉菜单和所选项目。

保存文件并使用以下命令启动 Vite 开发服务器：