antd的Form,或者其他基于rc-form封装的表单组件,利用getFieldDecorator
可以绑定一个id,这个id,可以是数组形式的
<Form.Item>
{
getFieldDecorator(`source[0]["url"]`, {
rules: [{required: true}]
})(<Input />)
}
</Form.Item>
<Form.Item>
{
getFieldDecorator(`source[1]["url"]`, {
rules: [{required: true}]
})(<Input />)
}
</Form.Item>
这样子写,我们最后用validateFieldsAndScroll
得到的source就是个数组,values会变成如下
{
source: [
{url: xxx},
{url: xxx},
]
}
通过["url"]指定键名,这里的键名如果有双引号,那么基于redux 的mapPropsToFields,也要有双引号
mapPropsToFields(props) {
const {source = []} = props;
const json = {};
source.forEach((item, index) => {
const keyName = `source[${index}][url]`
这里url没有用双引号包裹,会不生效
所以正解应该是
const keyName = `source[${index}]["url"]`
json[keyName] = Form.createFormField({
value: item.url
});
});
console.log(json)
return json;
}
网友评论