Ant-Design-React Cascader级联动态选择组件使用指南

Ant-Design-React Cascader级联动态选择组件使用指南

先来看看官网里面的例子https://ant.design/components/cascader-cn/#components-cascader-demo-lazy

import { Cascader } from 'antd';//4.15.0

const optionLists = [
  {
    value: 'zhejiang',
    label: 'Zhejiang',
    isLeaf: false,
  },
  {
    value: 'jiangsu',
    label: 'Jiangsu',
    isLeaf: false,
  },
];

const LazyOptions = () => {
  const [options, setOptions] = React.useState(optionLists);

  const onChange = (value, selectedOptions) => {
    console.log(value, selectedOptions);
  };

  const loadData = selectedOptions => {
    const targetOption = selectedOptions[selectedOptions.length - 1];
    targetOption.loading = true;

    // load options lazily
    setTimeout(() => {
      targetOption.loading = false;
      targetOption.children = [
        {
          label: `${targetOption.label} Dynamic 1`,
          value: 'dynamic1',
        },
        {
          label: `${targetOption.label} Dynamic 2`,
          value: 'dynamic2',
        },
      ];
      setOptions([...options]);
    }, 1000);
  };

  return <Cascader options={options} loadData={loadData} onChange={onChange} changeOnSelect />;
};

ReactDOM.render(<LazyOptions />, mountNode);

需求:产品有三级分类,前端需要调接口查询第一级分类然后根据用户选择的第一级code查询第二级的分类数据,最后通过选择的第二级数据查询第三级数据。

首先,我们先要理解Cascader运作的方法:options为总的数据源,不管是二级还是三级的数据都储存在options中(特别注意,在对targetOption进行操作以后,ant已经在options中自动整合targetOption,但是react是不知道你的options已经变了的,所以要调用setOptions让react组件知道数据发生了变化然后自动刷新组件)。loadData为动态加载的方法,每次select中的数据有一个isLeaf标志,表明该节点是否为树叶节点,如果为true则表明这级后面已经没数据了,为fales的话则是表明后面还有下一级的数据并且会自动调用loadData方法。大致了解了运作方法之后,下面结合需求用伪代码实现一下。

import { Cascader } from 'antd';//4.15.0

const optionLists = [
  {
    value: 'zhejiang',
    label: 'Zhejiang',
    isLeaf: false,
  },
  {
    value: 'jiangsu',
    label: 'Jiangsu',
    isLeaf: false,
  },
];

const LazyOptions = () => {
  const [options, setOptions] = React.useState(optionLists);

  const onChange = (value, selectedOptions) => {
    console.log(value, selectedOptions);
  };

  const loadData = selectedOptions => {
    const targetOption = selectedOptions[selectedOptions.length - 1]; //selectedOptions.length指的是目前有几级
    targetOption.loading = true;
    // load options lazily
    ajax('...',{value:selectedOptions.value}).then((res) => { //用选中的那一项的value给后端去请求下一级的数据,如果回来的数据带有isLeaf为false的标志,会自动再调用loadData方法
      targetOption.loading = false;
      targetOption.children = res.data //把请求到的数据放入targetOption
      setOptions([...options]);//目的是更新Cascader组件
    });
  };

  return <Cascader options={options} loadData={loadData} onChange={onChange} changeOnSelect />;
};

ReactDOM.render(<LazyOptions />, mountNode)

这个动态加载的功能在官网里面写的不是很详细,所以在这里总结一下。希望antd官网能越办越好!

  • 1
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
根据引用,在安装@ant-design/react-native时,不再需要手动链接(@ant-design/icons-react-native),而是可以使用自动链接功能。只需要使用命令`npm install @ant-design/icons-react-native --save-dev`来安装@ant-design/icons-react-native即可。此外,可以在`node_modules/@ant-design`文件夹下找到安装的文件。 根据引用,可以使用命令`react-native -v`来检查是否成功安装了react-native。 根据引用,示例代码展示了如何全局使用ant-design-mobile组件。官方文档中的示例是按需引入的,如果要全局使用,需要手动引入相应的组件文件。示例代码中引入了Button和InputItem组件,并在App组件使用了这些组件。 所以,ant-design-mobile是一个基于React Native的UI组件库,可以通过自动链接或手动引入组件文件的方式来使用。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *3* [react native 0.70版本使用ant-design-mobile-rn及icons字体图标库](https://blog.csdn.net/weixin_43233914/article/details/126849915)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT0_1"}}] [.reference_item style="max-width: 50%"] - *2* [react native 使用ant-design-mobile-rn的icon字体库](https://blog.csdn.net/weixin_43233914/article/details/119450451)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT0_1"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值