react+antd 给switch设置初始值变量

react项目使用antd组件中的switch功能,设置初始值为变量,所以需要在 Form.Item 标签上添加一个 valuepropname={初始值}  

错误示范:

<Form.Item label="开关">
   <Switch defaultChecked={data.type} checkedChildren="开启" unCheckedChildren="关闭" onChange={this.onchange} size="default" />
</Form.Item>

记得加上key值,不然浏览器的控制台会报错 

正确示范

<Form.Item label="开关" valuepropname={data.type} key={data.type}>
   <Switch defaultChecked={data.type} checkedChildren="开启" unCheckedChildren="关闭" onChange={this.onchange} size="default" />
</Form.Item>


在触发onchange事件的时候改变switch的值
onchange = async (checked) => {
    const { data } = this.props;
 if (checked === false) {
    data.type = 0;
    调用接口修改switch状态
 } else if (checked === true) {
     data.type = 1;
     调用接口修改switch状态
  }
};

 

  • 1
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值