react antd动态添加＜Select.Option＞

傷城~ 2022-11-20 08:21 373阅读 0赞

util：

//查询枚举数据
    export const findEnumData = async (typeName: string) => { 
        var categoryVo: any = new Object;
        categoryVo.categoryName = typeName;
        //通过枚举分类名称查询分类id
        return await fetchCategoryAll(categoryVo).then((res: any) => { 
            console.log(res)
            if (res.result?.data != null) { 
                categoryVo.categoryId = res.result.data[0].id
                return fetchEnumCode(categoryVo).then((res: any) => { 
                    var enumData = new Array
                    res.result.data.list.map((item: EnumCodeVO) =>
                        enumData.push({  text: item.typeName })
                    )
                    return enumData
                })
            }
            else { 
                return new Array
            }
        })
        //通过分类id查询当前类别所有枚举数据
    }

**调用：**

const renderDeviceTypeItems = async () => { 
        return await findEnumData("装置类型").then((res: any) => { 
          var deviceTypeItem = res.map((item: any) =>
            <Select.Option value={ item.text}>{ item.text}</Select.Option>
          )
          return deviceTypeItem
        })
      }

**使用：**

<Form.Item
                labelCol={ {  span: 8 }}
                wrapperCol={ {  span: 8 }}
                label={ language.messages["device.tankAreaName"]}
              >
                { getFieldDecorator('tankArea.id', { 
                  rules: [
                    { 
                      required: true,
                      message: language.messages["device.tankAreaNameCannotEmpty"]
                    },
                    { 
                      max: 50, message: language.messages["device.moreThanMaxLength"]
                    },
                  ]
                })(<Select placeholder={ language.messages["form.pleaseselect"]}>
                  { options}
                </Select>
                )}
              </Form.Item>