antd在form中一个select设置另一个select

需求:

所属网络(select)变化的时候,对应空投合约(select)也跟着变化。

 

const onChainChange = (chainId: any) => {
    setCurrChainId(chainId)
    const currOptions = extraObj.airdropContractFormOptions.map((item: any) => {
      if (item.network_id === chainId) {
        return item
      }
    }).filter(Boolean)
    // 修改另一个select的值
    form.setFieldsValue({airdrop_contract_id: currOptions[0]});
  }



// 第一个select
<Form.Item 
          label="所属网络"
          name="network_id"
          rules={[{ required: true, message: '请选择所属网络!' }]}
        >
          <Select 
            onChange={onChainChange}
            disabled={(extraObj.type === 'edit') ? true : false}
            options={extraObj.chainFormOptions}
          >
          </Select>
        </Form.Item>


// 第二个select
<Form.Item 
          label="选择空投合约"
          name="airdrop_contract_id"
          rules={[{ required: true, message: '请选择空投合约!' }]}
        >
          <Select 
            disabled={(extraObj.type === 'edit') ? true : false}
            options={ currChainId ? 
              extraObj.airdropContractFormOptions.map((item: any) => {
                if (item.network_id === currChainId) {
                  return item
                }
              }).filter(Boolean)
              :
              extraObj.airdropContractFormOptions
            }
          >
          </Select>
        </Form.Item>

 

posted @ 2024-05-08 17:23  走走停停走走  Views(10)  Comments(0Edit  收藏  举报