寫點(diǎn)雜記，寫這個(gè)文章原因是因?yàn)槲覍?duì)象要做這個(gè)功能，我們正好用到了特意拆寫成了1個(gè)簡(jiǎn)單的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": "審核結(jié)果",
        "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: '請(qǐng)?zhí)顚懻_的' + 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: '請(qǐng)?zhí)顚懻_的' + 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