react Ant Design 动态生成表单，并带验证

写点杂记，写这个文章原因是因为我对象要做这个功能，我们正好用到了特意拆写成了1个简单的demo

import React, {Component} from 'react'
import {connect} from 'react-redux'
import { Switch,Form,Radio,Input ,Button} from 'antd';

let TestData = {
    "code": 0,
    "itemList": [{
        "itemId": 65,
        "itemName": "审核意见",
        "itemNameEn": "shyj",
        "type": "TEXT",
        "options": "",
        "optionsEn": "",
        "ifrequire": 1,
        "listOrder": 1,
        "val": ""
    }, {
        "itemId": 66,
        "itemName": "审核结果",
        "itemNameEn": "shjg",
        "type": "RADIO",
        "options": "PASS:通过\r\nNOT_PASS:不通过",
        "optionsEn": "NOT_PASS:Not Pass",
        "ifrequire": 1,
        "listOrder": 2,
        "val": ""
    }]
}

// @connect(
//     // 你需要啥属性放到state里面
//     state => {
//         console.log(state)
//         return {num: state.counter.number}
//     },
//     {}
// )

@Form.create()
class AnalysisTree extends Component {
    componentDidMount() {
        console.log(TestData)
    }

    onChange =(value)=>{

    }
    handleSubmit = e => {
        e.preventDefault();
        this.props.form.validateFieldsAndScroll((err, values) => {
          if (!err) {
            console.log('Received values of form: ', values);
          }
        });
      };
    render() {
        const {getFieldDecorator } = this.props.form;
        return (
            <div id="analysisTree">
                        <Form onSubmit={this.handleSubmit}>

                          {
                                TestData.itemList.map((data,i)=>{
                                switch (data.type){
                                    case 'TEXT':
                                            return(
                                                <Form.Item label={data.itemName}>
                                                    {getFieldDecorator(JSON.stringify(data.itemId),{
                                                        rules: [{
                                                            required: true, 
                                                            message: '请填写正确的' + data.itemName}],
                                                    })(
                                                        <Input style={{ width: 230 }} />
                                                    )}
                                            </Form.Item>
                                            );
                                        case 'RADIO':
                                        return(
                                            <Form.Item label={data.itemName}>
                                                    {getFieldDecorator(JSON.stringify(data.itemId),{
                                                        rules: [{
                                                            required: true, 
                                                            message: '请填写正确的' + data.itemName}],
                                                    })(
                                                        <Radio.Group style={{ width: 230 }} onChange={this.onChange} >
                                                                <Radio  value={0}>完成</Radio>
                                                                <Radio  value={1}>未完成</Radio>
                                                        </Radio.Group>
                                                    )}
                                            </Form.Item>
                                        );
                                        default :
                                    return '';
                               }
                            })
                          }
                          <Form.Item>
                            <Button htmlType='submit'>提交</Button>
                          </Form.Item>
                        </Form>
            </div>
        )
    }
}

export default AnalysisTree