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

啦啦啦啦

发布于 2023-02-11 10:24:55

1.5K0

发布于 2023-02-11 10:24:55

文章被收录于专栏：啦啦啦啦前端啦啦啦啦前端

先写思路：这里假设我写了两个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}`
            },
    }