Antdpro - protable realizes the linkage effect of two selection boxes

Realization effect
1） Under normal circumstances ,a It's normal ,b Is disabled

2） When choosing a when , Will be released b Disabled state of , And give b The drop-down data assignment of the selection box of

3） choice b, And empty a Value , Should be cleared and disabled b, Return to the initial state


4） Click on “ Reset ”, Return to the initial state

Key code ：

......

const [eleValue, setEleValue] = useState<any>(undefined);  // b Value 
const [labelDisabled, setLabelDisabled] = useState<boolean>(true); // b Whether to disable 
const [hideSearchLabel, setHideSearchLabel] = useState<string>(''); // b option Value 
  
const columns: ProColumns<TableListItem>[] = [
      {
    
      title: 'a',
      dataIndex: 'domainCode',
      hideInTable: true,
      valueEnum: typeEnum,
      fieldProps: {
    
        placeholder: ' Please select a',
        onChange: (val: any) => {
    
          setEleValue(undefined); // 1、 When a When the change , Will be emptied first b The selected value or the remaining warning message ;
          // 2、 There is value , Explain that you are choosing a Drop down value for , Need to be lifted b Disabled state of ;
          if (val) {
    
            setLabelDisabled(false);
          } else {
     // 3、 Value does not exist , explain a The selection box is cleared , It needs to be disabled again ;
            setLabelDisabled(true);
          }
        },
      },
      search: {
    
        transform: (value) => {
    
          setHideSearchLabel(value); //  to update a The type of , convenient b And then change options The value of 
          return {
     domainCode: value };
        },
      },
    },
    {
    
      title: 'b',
      dataIndex: 'elementLabel',
      ellipsis: true,
      valueEnum: elementEnum,
      fieldProps: {
    
        placeholder: ' Please select b',
        onChange: (val: any) => {
    
          setEleValue(val); //  to update b Value 
        },
      },
      renderFormItem: () => (
        <ProFormSelect
          wrapperCol={
    {
     span: 24 }}
          disabled={
    labelDisabled}
          value={
    eleValue}
          options={
    
            //  according to a Type value of 
            hideSearchLabel === 'OFFICIAL_DOCUMENT'
              ? officialElementOption
              : hideSearchLabel === 'SERVICE_DOCUMENT'
              ? govServiceElementOption
              : []
          }
        />
      ),
    },
]
......