本文基于antd组件库3.x版本的组件form以及select展开

论，如何把二级级联选择封成一个适合放进form.item里用的组件

我自己写的⬇️

  1. import { useRequest } from 'ahooks';
  2. import { Select } from 'antd';
  3. import React, { useState } from 'react';
  4. import styles from './index.module.scss';
  6. interface CascadeSelectProps {
  7.   value: any[];
  8.   onChange: (e: any[]) => void;
  9.   options: {
  10.     disabled: boolean;
  11.   };
  12. }
  14. function CascadeSelect(props: CascadeSelectProps) {
  15.   const { value, options, onChange } = props;
  17.   const { data: governArchData = {} } = useRequest<any>(API.datagoverncore.governArch.postGetGovernArch.request);
  19.   const [cascadeValue, setCascadeValue] = useState<any[]>(value);
  20.   const [secondData, setSecondData] = useState<any[]>([]);
  22.   return (
  23.     <div className={styles['cascade-select']}>
  24.       <Select
  25.         className={styles['cascade-select-item']}
  26.         allowClear
  27.         placeholder="xxx"
  28.         showArrow={true}
  29.         showSearch
  30.         disabled={options.disabled}
  31.         onChange={e => {
  32.           setSecondData(governArchData[String(e)]);
  33.           setCascadeValue([e, undefined]);
  34.           onChange([e, undefined]);
  35.         }}
  36.       >
  37.         {Object.keys(governArchData)?.map(item => (
  38.           <Select.Option key={item} value={item}>
  39.             {item}
  40.           </Select.Option>
  41.         ))}
  42.       </Select>
  43.       <Select
  44.         className={styles['cascade-select-item']}
  45.         value={cascadeValue[1]}
  46.         allowClear
  47.         placeholder="xxx"
  48.         showArrow={true}
  49.         showSearch
  50.         disabled={options.disabled}
  51.         onChange={e => {
  52.           setCascadeValue([cascadeValue[0], e]);
  53.           onChange([cascadeValue[0], e]);
  54.         }}
  55.       >
  56.         {secondData?.map((item: any) => (
  57.           <Select.Option key={item?.id} value={item?.id}>
  58.             {item?.cat2Name}
  59.           </Select.Option>
  60.         ))}
  61.       </Select>
  62.     </div>
  63.   );
  64. }
  66. export default CascadeSelect;

如何在父组件中使用⬇️

<CascadeSelect
  value={cascadeValue}
  onChange={e => {
    props.form.setFieldsValue({ business: e });
  }}
  options={{
    disabled,
  }}
/>

基本上就是，传一个总的值进去，这里设定成[undefined, undefined]，然后change就调用函数修改

  1. 组件自身的value
  2. form里面的value（子传父用onChange修改