react使用antd中Form内联组件与Form表单默认赋值

先写思路:这里假设我写了两个Input组件,他们是一组,都在Form表单里面。然后我在通过initialValues给他们赋初始值。

  • 一组Input组件的解决方案:

一组Input组件,这里直接转到官网教程:
https://ant.design/components/form-cn/#header
看官网的代码直接套用即可

在这里插入图片描述

  • 给一组Input组件赋初始值解决方案:

我这里使用了官网此处的方法赋值完后,发现表单验证是无法通过了,就过一夜的苦寻答案后,解决如下(在initialValues里面赋值,但是写法和一般的写法有些不同,因为一组组件的话那个name属性里面是有两个名字的嘛,这就是困扰了我好久的问题。。基础不牢、地动山摇咳咳):

const initialValues = {
        config: JSON.parse(dataSource.config),
        appid: dataSource.app.id,
        remark: dataSource.remark,
        //自定义组件的默认值 给里面的对象赋值,这种写法 这个site就是那一组组件
        site:{
                title:`${JSON.parse(dataSource.config).site.title}`,
                floor:`${JSON.parse(dataSource.config).site.floor}`,
                logo:`${JSON.parse(dataSource.config).site.logo}`
            },
    }

方法就是上面的那个方法,代码可能对不上号,因为我这是从项目里面剪切过来的。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值