Cascader级联选择

    • 需要从一组相关联的数据集合进行选择，例如省市区，公司层级，事物分类等。

    • 从一个较大的数据集合中进行选择时，用多级分类进行分隔，方便选择。

    • 比起 Select 组件，可以在同一个浮层中完成选择，有较好的体验。

    基本

    省市区级联。

    Cascader级联选择 - 图2

    切换按钮和结果分开。

    3. const options = [
    4.   {
    5.     value: 'zhejiang',
    6.     label: 'Zhejiang',
    7.     children: [
    8.       {
    9.         value: 'hangzhou',
    10.         label: 'Hangzhou',
    11.       },
    12.     ],
    13.   },
    14.   {
    15.     value: 'jiangsu',
    16.     label: 'Jiangsu',
    17.     children: [
    18.       {
    19.         value: 'nanjing',
    20.         label: 'Nanjing',
    21.       },
    22.     ],
    23.   },
    24. ];
    26. class CitySwitcher extends React.Component {
    27.   state = {
    28.     text: 'Unselect',
    29.   };
    31.   onChange = (value, selectedOptions) => {
    32.     this.setState({
    33.       text: selectedOptions.map(o => o.label).join(', '),
    34.     });
    35.   };
    37.   render() {
    38.     return (
    39.       <span>
    40.         {this.state.text}
    41.         &nbsp;
    42.         <Cascader options={options} onChange={this.onChange}>
    43.           <a href="#">Change city</a>
    44.         </Cascader>
    45.       </span>
    46.     );
    47.   }
    48. }
    50. ReactDOM.render(<CitySwitcher />, mountNode);

    禁用选项

    通过指定 options 里的 disabled 字段。

    1. import { Cascader } from 'antd';
    3. const options = [
    4.   {
    5.     value: 'zhejiang',
    6.     label: 'Zhejiang',
    7.     children: [
    8.       {
    9.         value: 'hangzhou',
    10.         label: 'Hangzhou',
    11.         children: [
    12.           {
    13.             value: 'xihu',
    14.             label: 'West Lake',
    15.           },
    16.         ],
    17.       },
    18.     ],
    19.   },
    20.   {
    21.     value: 'jiangsu',
    22.     label: 'Jiangsu',
    23.     disabled: true,
    24.     children: [
    25.       {
    26.         value: 'nanjing',
    27.         label: 'Nanjing',
    28.         children: [
    29.           {
    30.             value: 'zhonghuamen',
    31.             label: 'Zhong Hua Men',
    32.           },
    33.         ],
    34.       },
    35.     ],
    36.   },
    37. ];
    39. function onChange(value) {
    40.   console.log(value);
    41. }
    43. ReactDOM.render(<Cascader options={options} onChange={onChange} />, mountNode);

    不同大小的级联选择器。

    1. import { Cascader } from 'antd';
    3. const options = [
    4.   {
    5.     value: 'zhejiang',
    6.     label: 'Zhejiang',
    7.     children: [
    8.       {
    9.         value: 'hangzhou',
    10.         label: 'Hangzhou',
    11.         children: [
    12.           {
    13.             value: 'xihu',
    14.             label: 'West Lake',
    15.           },
    16.         ],
    17.       },
    18.     ],
    19.   },
    20.   {
    21.     value: 'jiangsu',
    22.     label: 'Jiangsu',
    23.     children: [
    24.       {
    25.         value: 'nanjing',
    26.         label: 'Nanjing',
    27.         children: [
    28.           {
    29.             value: 'zhonghuamen',
    30.             label: 'Zhong Hua Men',
    31.           },
    32.         ],
    33.       },
    34.     ],
    35.   },
    36. ];
    38. function onChange(value) {
    39.   console.log(value);
    40. }
    42. ReactDOM.render(
    43.   <div>
    44.     <Cascader size="large" options={options} onChange={onChange} />
    45.     <br />
    46.     <Cascader options={options} onChange={onChange} />
    47.     <br />
    48.     <br />
    49.     <Cascader size="small" options={options} onChange={onChange} />
    50.     <br />
    51.     <br />
    52.   </div>,
    53.   mountNode,
    54. );

    Cascader级联选择 - 图5

    搜索

    可以直接搜索选项并选择。

    自定义字段名。

    1. import { Cascader } from 'antd';
    4.   {
    5.     code: 'zhejiang',
    6.     name: 'Zhejiang',
    7.     items: [
    8.       {
    9.         code: 'hangzhou',
    10.         name: 'Hangzhou',
    11.         items: [
    12.           {
    13.             code: 'xihu',
    14.             name: 'West Lake',
    15.           },
    16.         ],
    17.       },
    18.     ],
    19.   },
    20.   {
    21.     code: 'jiangsu',
    22.     name: 'Jiangsu',
    23.     items: [
    24.       {
    25.         code: 'nanjing',
    26.         name: 'Nanjing',
    27.         items: [
    28.           {
    29.             code: 'zhonghuamen',
    30.             name: 'Zhong Hua Men',
    31.           },
    32.         ],
    33.       },
    34.     ],
    35.   },
    36. ];
    38. function onChange(value) {
    39.   console.log(value);
    40. }
    42. ReactDOM.render(
    43.   <Cascader
    44.     fieldNames={{ label: 'name', value: 'code', children: 'items' }}
    45.     options={options}
    46.     onChange={onChange}
    47.     placeholder="Please select"
    48.   />,
    49.   mountNode,
    50. );

    Cascader级联选择 - 图7

    默认值

    默认值通过数组的方式指定。

    1. import { Cascader } from 'antd';
    3. const options = [
    4.   {
    5.     value: 'zhejiang',
    6.     label: 'Zhejiang',
    7.     children: [
    8.       {
    9.         value: 'hangzhou',
    10.         label: 'Hangzhou',
    11.         children: [
    12.           {
    13.             value: 'xihu',
    14.             label: 'West Lake',
    15.           },
    16.         ],
    17.       },
    18.     ],
    19.   },
    20.   {
    21.     value: 'jiangsu',
    22.     label: 'Jiangsu',
    23.     children: [
    24.       {
    25.         value: 'nanjing',
    26.         label: 'Nanjing',
    27.         children: [
    28.           {
    29.             value: 'zhonghuamen',
    30.             label: 'Zhong Hua Men',
    31.           },
    32.         ],
    33.       },
    34.     ],
    35.   },
    36. ];
    38. function onChange(value) {
    39.   console.log(value);
    40. }
    42. ReactDOM.render(
    43.   <Cascader
    44.     defaultValue={['zhejiang', 'hangzhou', 'xihu']}
    45.     options={options}
    46.     onChange={onChange}
    47.   />,
    48.   mountNode,
    49. );

    通过移入展开下级菜单，点击完成选择。

    1. import { Cascader } from 'antd';
    3. const options = [
    4.   {
    5.     value: 'zhejiang',
    6.     label: 'Zhejiang',
    7.     children: [
    8.       {
    9.         value: 'hangzhou',
    10.         label: 'Hangzhou',
    11.         children: [
    12.           {
    13.             value: 'xihu',
    14.             label: 'West Lake',
    15.           },
    16.         ],
    17.       },
    18.     ],
    19.   },
    20.   {
    21.     value: 'jiangsu',
    22.     label: 'Jiangsu',
    23.     children: [
    24.       {
    25.         value: 'nanjing',
    26.         label: 'Nanjing',
    27.         children: [
    28.           {
    29.             value: 'zhonghuamen',
    30.             label: 'Zhong Hua Men',
    31.           },
    32.         ],
    33.       },
    34.     ],
    35.   },
    37. function onChange(value) {
    38.   console.log(value);
    39. }
    41. // Just show the latest item.
    42. function displayRender(label) {
    43.   return label[label.length - 1];
    44. }
    46. ReactDOM.render(
    47.   <Cascader
    48.     options={options}
    49.     expandTrigger="hover"
    50.     displayRender={displayRender}
    51.     onChange={onChange}
    52.   />,
    53.   mountNode,
    54. );

    选择即改变

    这种交互允许只选中父级选项。

    Cascader级联选择 - 图10

    例如给最后一项加上邮编链接。

    3. const options = [
    4.   {
    5.     value: 'zhejiang',
    6.     label: 'Zhejiang',
    7.     children: [
    8.       {
    9.         value: 'hangzhou',
    10.         label: 'Hangzhou',
    11.         children: [
    12.           {
    13.             value: 'xihu',
    14.             label: 'West Lake',
    15.             code: 752100,
    16.           },
    17.         ],
    18.       },
    19.     ],
    20.   },
    21.   {
    22.     value: 'jiangsu',
    23.     label: 'Jiangsu',
    24.     children: [
    25.       {
    26.         value: 'nanjing',
    27.         label: 'Nanjing',
    28.         children: [
    29.           {
    30.             value: 'zhonghuamen',
    31.             label: 'Zhong Hua Men',
    32.             code: 453400,
    33.           },
    34.         ],
    35.       },
    36.     ],
    37.   },
    38. ];
    40. function handleAreaClick(e, label, option) {
    41.   e.stopPropagation();
    42.   console.log('clicked', label, option);
    43. }
    45. const displayRender = (labels, selectedOptions) =>
    46.   labels.map((label, i) => {
    47.     const option = selectedOptions[i];
    48.     if (i === labels.length - 1) {
    49.       return (
    50.         <span key={option.value}>
    51.           {label} (<a onClick={e => handleAreaClick(e, label, option)}>{option.code}</a>)
    52.         </span>
    53.       );
    54.     }
    55.     return <span key={option.value}>{label} / </span>;
    56.   });
    58. ReactDOM.render(
    59.   <Cascader
    60.     options={options}
    61.     defaultValue={['zhejiang', 'hangzhou', 'xihu']}
    62.     displayRender={displayRender}
    63.     style={{ width: '100%' }}
    64.   />,
    65.   mountNode,
    66. );

    动态加载选项

    使用 loadData 实现动态加载选项。

    1. import { Cascader } from 'antd';
    3. const options = [
    4.   {
    5.     value: 'zhejiang',
    6.     label: 'Zhejiang',
    7.     isLeaf: false,
    8.   },
    9.   {
    10.     value: 'jiangsu',
    11.     label: 'Jiangsu',
    12.     isLeaf: false,
    13.   },
    14. ];
    16. class LazyOptions extends React.Component {
    17.   state = {
    18.     options,
    19.   };
    21.   onChange = (value, selectedOptions) => {
    22.     console.log(value, selectedOptions);
    23.   };
    25.   loadData = selectedOptions => {
    26.     const targetOption = selectedOptions[selectedOptions.length - 1];
    27.     targetOption.loading = true;
    29.     // load options lazily
    30.     setTimeout(() => {
    31.       targetOption.loading = false;
    32.       targetOption.children = [
    33.         {
    34.           label: `${targetOption.label} Dynamic 1`,
    35.           value: 'dynamic1',
    36.         },
    37.         {
    38.           label: `${targetOption.label} Dynamic 2`,
    39.           value: 'dynamic2',
    40.         },
    41.       ];
    42.       this.setState({
    43.         options: [...this.state.options],
    44.       });
    45.     }, 1000);
    46.   };
    48.   render() {
    49.     return (
    50.       <Cascader
    51.         options={this.state.options}
    52.         loadData={this.loadData}
    53.         onChange={this.onChange}
    54.         changeOnSelect
    55.       />
    56.     );
    57.   }
    58. }
    1. <Cascader options="{options}" onChange="{onChange}" />