ant design的Switch组件的坑，怎么更改Switch的状态?

文章目录

不能更改状态？错误示范：
更改状态后，Switch以下的其他组件也被重置，错误示范：
正确代码：

用Switch时，怎么都改不了状态；要么就是切换页面时，再回本页，选择的值不见了；还有，切换Switch时，怎么把其他表单项给重置了呢？
重点：使用setFieldsValue更改取值；使用defaultChecked确定默认值。

看下错误代码，你是否犯过该类问题呢？如果有其他问题，欢迎评论区留言，一起讨论。

不能更改状态？错误示范：

this.state={show:false
}
<Form.Item wrapperCol={{ span: 4 }} label="是否启用">{getFieldDecorator('show', {initialValue: this.state.show,rules: [{ required: true, message: '请选择!' }],})(<SwitchonChange={(e) => {setFieldsValue({ show: e });}}// 不可！！！checked={this.state.show}/>)}
</Form.Item>

以上代码使用了checked，会导致点击失效，切换不了状态！个人理解的原因是：页面初始化state值是false，checked指定了为false。

更改状态后，Switch以下的其他组件也被重置，错误示范：

这里使用了state设置和取值。
这里的switchChecked是定义的是否选中的状态。看具体逻辑。

正确代码：

this.state={show:false
}
<Form.Item wrapperCol={{ span: 4 }} label="是否启用">{getFieldDecorator('show', {initialValue: this.state.show,rules: [{ required: true, message: '请选择!' }],})(<SwitchonChange={(e) => {setFieldsValue({ show: e });}}defaultChecked={this.state.show}/>)}
</Form.Item>

之后就可以随意开关了，取值也没问题。

ant design的Switch组件的坑，怎么更改Switch的状态?相关推荐

Ant Design中Form组件重置验证条件resetFields()方法
Ant Design中Form组件重置验证条件resetFields()方法需求, 实际完成时间(与任务生成日期联动,若任务生成日期选上,实际完成时间禁选) 却发现在验证完之后填写实际完成时间后任务 ...
Ant Design Vue Table 组件合并单元格
Ant Design Vue Table 组件合并单元格项目开发中,有时候需要实现单元格合并的需求,这里记录一下在Ant Design Vue的实现. <template><div ...
标题Ant Design of Vue 组件库中Modal“确认“按钮和“取消“按钮成英文状态
标题Ant Design of Vue 组件库中Modal"确认"按钮和"取消"按钮成英文状态因为是国际化的原因,造成确定按钮和取消按钮变成英文,需要设置 o ...
基于React、Ant Design的ButtonGroup组件
目录介绍使用方式安装使用 API Props children 介绍本组件基于React.Ant Design,适用于React + Ant Design项目本组件设计为超过一定数量的按钮 ...
2020年React Native使用Ant Design Mobile RN组件
Ant Design Mobile RN是一个很优秀的React Native 界面库,可以帮助我们简单方便的开发出漂亮的界面.我在基于0.63版本使用的过程中遇到一些小波折,比如字体无法正常,各种红 ...
看完这篇不要告诉我不会封装ant design弹框组件了
我是歌谣放弃很容易但是坚持一定很酷微信公众号关注前端小歌谣获取前端学习知识 1设计需求封装一个弹框组件直接调用接口 2技术栈 ant design+react 设计第一步绘制样式 < ...
用vue实现类ant Design的日历组件
前言最近在对以前写的vue项目进行优化,并且进行了一些功能的完善,我写了一个周报系统,其中一个完善的功能就是,可以通过日历选择以往的周报.于是我着手ant Design的一些功能,自己实现了一个周报 ...
Ant Design 中覆盖组件样式
使用场景: 比如ant design中的抽屉Drawer这个组件,由于组件库中的样式是给了padding为25px,但是我当前的需求是不需要padding,那么就需要写样式覆盖掉之前组件定义的样式. ...
antd 日期选择框如何提交_基于Ant Design的Modal组件来实现一个可拖拽的React模态框...
引言写这篇文章的原因是因为在项目中用到了Antd Design的React组件,当有业务需求需要用到模态框的时候遇到了一些小问题,Antd的模态框Modal组件时不能拖拽的,一般情况下不可拖拽也没什 ...