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

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Warning 1 这一周又快过去了,总觉得还是在原地踏步,周六准备来一趟公司加个班。 其实我也很想和那些人一样看...
    Little_L阅读 285评论 0 0
  • 绿代表了什么,它不但是阳光的象征,也是我向往的颜色。 生活中,有很多绿色的美好的东西,比如参天的大树;...
    如果相遇阅读 209评论 0 2
  • 1. 早上妈妈叫起床,没有情绪。早起习惯有进步。 2. 中午吃饭很慢,不过吃了蔬菜和肉。挑食习惯有改正。 每天下午...
    hl越望越远阅读 164评论 0 0