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

29 篇文章 1 订阅
11 篇文章 4 订阅


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

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

不能更改状态?错误示范:

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

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

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

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

正确代码:

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

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

  • 0
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

清颖~

您的鼓励让我们一起进步,加油!

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值