美文网首页
Form,getFieldDecorator绑定数组,多维数组注

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

作者: 王善良_ | 来源:发表于2021-07-05 16:04 被阅读0次

    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;
        }
    

    相关文章

      网友评论

          本文标题:Form,getFieldDecorator绑定数组,多维数组注

          本文链接:https://www.haomeiwen.com/subject/wfkiultx.html