Form,getFieldDecorator绑定数组,多维数组注

2021-07-05  本文已影响0人  Asuler

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;
    }
上一篇 下一篇

猜你喜欢

热点阅读