antd 实现三级下拉框

Ant Design（蚂蚁金服UI库）提供了一个 Cascader（级联选择器）组件，可以很方便地实现三级下拉框效果。

首先，需要准备好三级数据源，比如：

const options = [
  {
    value: 'zhejiang',
    label: '浙江省',
    children: [
      {
        value: 'hangzhou',
        label: '杭州市',
        children: [
          {
            value: 'xihu',
            label: '西湖区',
          },
          {
            value: 'xiacheng',
            label: '下城区',
          },
        ],
      },
      {
        value: 'ningbo',
        label: '宁波市',
        children: [
          {
            value: 'haishu',
            label: '海曙区',
          },
          {
            value: 'jiangdong',
            label: '江东区',
          },
        ],
      },
    ],
  },
  {
    value: 'jiangsu',
    label: '江苏省',
    children: [
      {
        value: 'nanjing',
        label: '南京市',
        children: [
          {
            value: 'xuanwu',
            label: '玄武区',
          },
          {
            value: 'jianye',
            label: '建邺区',
          },
        ],
      },
      {
        value: 'suzhou',
        label: '苏州市',
        children: [
          {
            value: 'gusu',
            label: '姑苏区',
          },
          {
            value: 'wujiang',
            label: '吴江区',
          },
        ],
      },
    ],
  },
];

然后在组件中使用 Cascader 组件，并将 options 数据源传递给它：

import { Cascader } from 'antd';

function onChange(value, selectedOptions) {
  console.log(value, selectedOptions);
}

function CascaderDemo() {
  return (
    <Cascader options={options} onChange={onChange} placeholder="请选择" />
  );
}

export default CascaderDemo;

这样，就可以实现三级下拉框了。当用户选择某个选项时，onChange 回调函数会被触发，可以通过回调函数获取当前选中的值和选项。可以根据选中的值，通过查询接口等方式加载下一级选项，从而实现动态联动效果。