关于antd的form表单组件的一个天坑。。。

最新推荐文章于 2024-09-02 11:50:37 发布

凭栏听雨客

最新推荐文章于 2024-09-02 11:50:37 发布

阅读量438

点赞数

分类专栏：前端React 文章标签：前端 react

本文链接：https://blog.csdn.net/qq_43720551/article/details/131502261

版权

20 篇文章 0 订阅

订阅专栏

事情是这样的，项目中遇到了一个问题，用表单包裹着着一个Switch组件，提交表单的时候可以将Switch的值一起提交。
在这里插入图片描述

form.setFieldsValue({power:0})

        <Form.Item label="Switch" name="power">
          <Switch checked={flag}/>
        </Form.Item>

这个开关其实是根据checked 属性来表示开或者关的。当时想要的效果是开着的，但是效果出来都是关着的，我本来以为flag取值有问题，于是把checked 属性直接复制为true，但是依然没有生效。。。

google了很久为什么Switch组件的checked 属性不生效，结果都没有找到答案。。

真凶其实是formItem的name属性。。Form.Item 设置 name 后，组件受 Form 管理值。而在代码前文有一个将form中的power这个Item设置为0 的操作，因此FormItem里的Switch 就不会生效了。。

相同的，如果formItem设置了name属性里放了Input ，input里的数据也会被formItem 给覆盖掉。
具体可以看官网案例

关注

专栏目录