动态渲染antd的form组件时报错.百思不得其解,追根究底之后,发现是因为表单的字段和设置的不完全统一,所以需要统一一下。
原代码:
//数据
const formList = theme => [
{ title: theme.language.gender, key: 'sex',list: [1, 0] },
{
title: theme.language.nationality,
key: 'nationality',
list: ['中国', '英国', '美国', '日本', '加拿大', '澳大利亚'],
},
{ title: theme.language.generation, key: 'age', list: ['18~28', '28~38', '38~48', '48~58', '其他'] },
{ title: theme.language.educationLevel, key: 'education', list: ['大学专科', '大学本科', '研究生及以上', '其他'] },
{
title: theme.language.monthlyIncomeLevel,
key: 'income',
list: ['10000以下', '10000~30000', '30000~50000', '50000~80000', '其他'],
},
]
class Demo extends React.Component {
render(){
return(
<Form>
{formList(theme).map((itema, index) => {
return (
<div className={`cotent`} key={index}>
<p className={`title`}>{itema.title}</p>
<Form.Item>
{getFieldDecorator(itema.name, {
initialValue: '请选择',
rules: [{ required: true, message: 'Please input your Auth code ! ' }],
})(
<Select
className={`name-input`}
placeholder="Please select a country"
suffixIcon={<Icon type="caret-down" />}
onChange={handleChange}>
{itema.list.map((item, index1) => {
return (
<Option key={index1} value={item}>
{item === 0 ? '男' : item === 1 ? '女' : item}
</Option>
)
})}
</Select>
)}
</Form.Item>
</div>
)
})}
</Form>
)
}}
修改后新代码:
{formList(theme).map((itema, index) => {
return (
<div className={`cotent`} key={index}>
<p className={`title`}>{itema.title}</p>
<Form.Item>
{getFieldDecorator(itema.name, {
initialValue: '请选择',
})(
<Select
className={`name-input`}
placeholder="Please select a country"
suffixIcon={<Icon type="caret-down" />}
onChange={handleChange}>
{itema.list.map((item, index1) => {
return (
<Option key={index1} value={item}>
{item === 0 ? '男' : item === 1 ? '女' : item}
</Option>
)
})}
</Select>
)}
</Form.Item>
</div>
)
})}
网友评论