Ant design封装

刚来实习几天，需要用ant design写后台，还没接触过ant design，看了一下文档，就匆匆忙忙写了。看了ant design文档里面写的表单里是单个写的，但是现实需求里面一个表单里面可能有很多重复的，只是一些label名，rules[]需求，还有对应的是input框select框还是一些其他对应元素，如果需要以下图片的话，调用封装的方法会简单很多

捕获.PNG

       <Form.Item {...formItemLayout} label="...">
          {getFieldDecorator('...', {
            rules: [
              {
                required: true,
                message: 'Please input ...',
              },
            ],
          })(<Input placeholder="Please input ..." />)}
        </Form.Item>

对这些封装一下的话，可以省时省力
把这些封装成一个函数，需要的时候调用它

下面这个是自己写的

还有跟多的东西可以优化，自己配置，这些只根据我自己的需求
先配置我们的数据

     const item = [
            { title: "...", key: "1", value:'...',type:'input'},
            { title: "...", key: "2", value: '...',type:'select',dataList:[1,2,3,4,5]},
        ];

封装我们的方法,用的是3.26.18版本的所以要这个const { getFieldDecorator } = this.props.form;

     getFields(e) {
        const formItemLayout = {
            labelCol: {
                xs: { span: 24 },
                sm: { span: 6 },
            }
        };
        const { getFieldDecorator } = this.props.form;
        const children = [];
        for (let i = 0; i < e.length; i++) {
            children.push(
                <FormItem
                    key={i}
                    label={e[i].title}
                    {...formItemLayout}
                >
                    {getFieldDecorator(e[i].key, {
                        rules: [
                            {
                                required: e[i].required || false,
                                whitespace: true,
                                message: e[i].message || null,
                            },
                        ],
                        initialValue: e[i].value,
                    })(
                     e[i].type==='input'?<Input></Input>:
                  <Select>
                     {item.dataList.length && item.list.map((ite, index) => {
                            return <Option value={ite.value} key={index}>{...}</Option>
                        })}
                  </Select>
                    )}
                </FormItem>
            );
        }
        return children;
    }

调用方法

<From>
    this.getFields(item)
</From>

下面是同事写的

配置数据

const item = { type: 'INPUT', labelName: '标识1', labelKey: 'a', required: true, message: '请输入标识1' },
            { type: 'INPUT', labelName: '标识2', labelKey: 'b', required: true, message: '请输入标识2' },
            { type: 'SELECT', labelName: '标识3', labelKey: 'c', required: true, message: '请输入标识3',list:[1,2,3,4,5,5] },
            { type: 'TEXTAREA', labelName: '备注', labelKey: 'd', required: true, message: '请输入备注' },

先渲染FromItem
里面调用switchtype里面渲染的是我们要用的选择框

   renderFormItem(item) {
        let formItemLayout = {
            labelCol: { span: 6 },
            wrapperCol: { span: 14 },
        };
        let { getFieldDecorator } = this.props.form;
        return (<FormItem {...formItemLayout} label={item.labelName}>
            {getFieldDecorator(item.labelKey, {
                rules: [{ message: `请${item.type === "SELECT" ? "选择" : "输入"}${item.labelName}`, required: item.required, }],
            })(
                this.switchType(item)
            )}
        </FormItem>)
    }

switchType(item) {
        switch (item.type) {
            case 'INPUT':
                return <Input placeholder={item.placeholder || `请输入${item.labelName}`} maxLength={item.maxLength || 999} />
            case 'INPUTNUMBER':
                return <InputNumber placeholder={item.placeholder || `请输入${item.labelName}`} min={0} />
            case 'SELECT':
                    return <Select
                        style={{ width: '100%' }}
                        showSearch
                        allowClear
                        optionFilterProp="children">
                        {item.list.length && item.list.map((ite, index) => {
                            return <Option value={ite.value} key={index}>{ite.name}</Option>
                        })}
                    </Select>
            case 'DATE':
                return <DatePicker showTime />
            case 'TEXTAREA':
                return <Input.TextArea />
            default:
                return null;
        }

如何使用

                <Form>
                    {item.map((item, index) => {
                        return (
                            this.renderFormItem(item)
                        )
                    })}
                </Form>

总结

我封装的只能用于轻量任务的，还有许多的考虑不周尤其是我想渲染一个下拉框还是输入框还是数字输入框，这些还是有很多不足的，还有如果我渲染下拉框，里面的数据如何渲染也是没有考虑,后知后觉，自己写挺垃圾的，暂时先用着，以后再改进，我淦