如何在React JS中实现Material UI多列下拉框及后端数据展示

核心思路 #

Material UI的Autocomplete组件支持自定义选项渲染，我们可以利用它实现多列下拉框；同时通过React的useEffect钩子从后端接口获取数据，存入状态后渲染到下拉框中。

步骤1：确认依赖安装 #

确保项目已安装Material UI相关包：

npm install @mui/material @emotion/react @emotion/styled

步骤2：完整实现代码 #

import React, { useState, useEffect } from 'react';
import { Autocomplete, TextField, ListItem, Box, Typography } from '@mui/material';

const MultiColumnDropdown = () => {
  // 存储后端返回的下拉选项数据
  const [options, setOptions] = useState([]);
  // 存储选中的选项
  const [selectedOption, setSelectedOption] = useState(null);

  // 从后端拉取数据
  useEffect(() => {
    const fetchDropdownData = async () => {
      try {
        // 替换为你的实际后端接口地址
        const response = await fetch('/api/dropdown-data');
        const data = await response.json();
        // 假设后端返回结构：[{ id: 1, firstColumn: "列1内容1", secondColumn: "列2内容1" }, ...]
        setOptions(data);
      } catch (err) {
        console.error('加载下拉数据失败:', err);
      }
    };

    fetchDropdownData();
  }, []);

  // 自定义多列选项的渲染逻辑
  const renderMultiColumnOption = (props, option) => {
    return (
      <ListItem {...props} disablePadding>
        <Box sx={{ display: 'flex', width: '100%', padding: '8px 16px' }}>
          {/* 第一列：突出显示 */}
          <Typography sx={{ flex: 1, fontWeight: 500 }}>
            {option.firstColumn}
          </Typography>
          {/* 第二列：辅助文本样式 */}
          <Typography sx={{ flex: 1, color: 'text.secondary' }}>
            {option.secondColumn}
          </Typography>
        </Box>
      </ListItem>
    );
  };

  return (
    <Autocomplete
      value={selectedOption}
      onChange={(event, newValue) => setSelectedOption(newValue)}
      options={options}
      renderOption={renderMultiColumnOption}
      renderInput={(params) => (
        <TextField
          {...params}
          label="多列下拉选择器"
          variant="outlined"
          fullWidth
        />
      )}
      // 定义选中后输入框显示的文本格式
      getOptionLabel={(option) => `${option.firstColumn} | ${option.secondColumn}`}
    />
  );
};

export default MultiColumnDropdown;

关键细节说明 #

1. 后端数据适配：
   后端需返回对象数组，每个对象包含你要展示的两列字段（示例中用firstColumn和secondColumn，可替换为业务实际字段名）。

2. 样式自定义：
   通过Box的弹性布局实现两列拆分，可调整sx属性修改列宽比例、字体样式、内边距等，适配你的UI需求。

3. 加载状态优化：
   如果需要处理加载中的状态，可以添加isLoading状态变量，在数据未返回时，在renderInput中展示加载提示（比如InputProps里加加载图标）。

4. 选中逻辑：
   getOptionLabel控制选中后输入框的显示文本，可根据需求调整拼接格式或只显示单列内容。

内容的提问来源于stack exchange，提问作者JAYDIP