antd-Select组件遇到的小坑

 

      // 接口来源数据
      const treeDataSource = [
    {
      title: '文件导入',
      value: '0-0',
      key: '0-0'
    },
    {
      title: '平台导入',
      value: '0-1',
      key: '0-1'
    },
  ]

 

         
                <Form.Item
                  label="接口来源"
                  name="username"
                  rules={[{ required: true, message: '请选择接口来源' }]}
                  colon={false}
                >
                  {
                    importData == 'AGM' ?
                      <Select defaultValue='0-0' disabled >
                        <Option value="0-0">文件导入111</Option>
                        <Option value="0-1">文件导入222</Option>
                      </Select> : <TreeSelect
                        getPopupContainer={triggerNode => triggerNode.parentElement}
                        treeData={treeDataSource}
                        value={value}
                        onChange={onChangeProps}
                        placeholder={'请选择'}
                        className={styles.treeSelect}
                        treeDefaultExpandAll
                        allowClear
                      >
                      </TreeSelect>
                  }
                </Form.Item>

问题描述 ：

当选择dsm时，接口来源中选择'0-0'(文件导入)，再切回agm，然后再切换回dsm，接口来源中文件导入处于选中状态，下拉选中正常。但是当选择dsm时，接口来源中选择'0-1'(平台导入)，再切回agm，接口来源框中显示文件导入111，然后再切换回dsm，接口来源中平台导入不处于选中状态。

产生原因：就是在接口来源选中一次之后，就会自动给form表单的值value改变，因此就会出现当接口来源中选中平台导入（0-1）之后，切换回agm,接口来源回显的是文件导入222，而不是文件导入111。

解决方法:当选中agm之后，设置选中的接口来源对应的form的值（即回到初始状态）

/**
   * 导入类型
   */
  const onImportType = (value: any, label: any) => {
    console.log(value, label);
    setImportData(label[0])
    console.log(label[0])

    // console.log(value)

    console.log(editForm.getFieldValue("username"),88888)
    if (label[0] == "AGM") {
      editForm.setFieldsValue({
        username: '0-0'
      })
    }
  }