Ant-design-react Cascader Cascading Dynamic Selection Components Guide

Ant. Design/Components /…

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);
Copy the code

Requirements: The product has three levels of classification, and the front end needs to query the first level of classification through the interface, then query the second level of classification data according to the first level of code selected by the user, and finally query the third level of data through the second level of data selected.

First, we need to understand how Cascader works:

Options is the total data source, and both secondary and tertiary data are stored in options. React doesn’t know that your options have changed, so call setOptions to let the React component know that the data has changed and refresh the component automatically.

LoadData is a dynamically loaded method. Each select has an isLeaf flag indicating whether the node is a leaf node. If it is true, it indicates that there is no data at this level; if it is fales, it indicates that there is data at the next level and loadData is automatically called.

After a general understanding of the operation method, the following combined with the requirements of pseudo-code implementation.

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 refers to the current number of levels
    targetOption.loading = true;
    // load options lazily
    ajax('... ', {value:selectedOptions.value}).then((res) = > { // The value of the selected item is used to request the next level of data to the back end. If the value comes back with isLeaf false, the loadData method is automatically called again
      targetOption.loading = false;
      targetOption.children = res.data // Put the requested data into targetOption
      setOptions([...options]);// The purpose is to update the Cascader component
    });
  };

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

ReactDOM.render(<LazyOptions />, mountNode)
Copy the code

This dynamic loading feature is not detailed in the official website, so it is summarized here. I hope antD official website will become better and better!