and design pro Select 分组双重嵌套遍历实现

最新推荐文章于 2024-06-20 09:46:43 发布

未去

最新推荐文章于 2024-06-20 09:46:43 发布

阅读量398

点赞数

分类专栏： node js 文章标签： javascript react.js 前端

本文链接：https://blog.csdn.net/liangbao568/article/details/127858885

版权

node js 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

这篇博客介绍了如何在React应用中利用Ant Design Pro的Select组件，通过双重嵌套遍历来实现分组选择功能。示例代码展示了如何从服务器获取数据，并将数据动态渲染到Select组件的Option和OptGroup中，为前端新手提供了学习参考。

摘要由CSDN通过智能技术生成

and design pro Select 分组双重嵌套遍历实现

import React, { useState, useEffect } from 'react';
import { Select } from 'antd';
import { getList } from '@/services/common';

const Component = ({ value, ...restProps }) => {
  const [loading, setLoading] = useState(true);
  const [options, setOptions] = useState([]);

  const getListFromServer = async () => {
    setLoading(true);
    const response = await getList('areaTypes', { show_area: true });
    setLoading(false);
    if (response.code === 'SUCCESS') {
      setOptions(response.data);
    }
  };

  useEffect(() => {
    getListFromServer();
  }, []);

  return (
    <Select
      loading={loading}
      value={value ? value + '' : undefined}
      placeholder="请选择"
      {...restProps}
    >
      {options.map(function(areaType, index) {
        return (
          <Select.OptGroup label={areaType.display_name}>
            {areaType.saleAreas.map(function(area, number) {
              return (
                <Select.Option key={area.id}>{area.display_name}</Select.Option>
              );
            })}
          </Select.OptGroup>
        );
      })}
    </Select>
  );
};

export default Component;