写点杂记,写这个文章原因是因为我对象要做这个功能,我们正好用到了特意拆写成了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