React ant design UI 禁用启用 switch 开关加弹窗确认提示代码片段

最新推荐文章于 2024-08-02 16:58:54 发布

蔡俊锋

最新推荐文章于 2024-08-02 16:58:54 发布

阅读量4.8k

点赞数 1

分类专栏：前端文章标签： switch confirm Modal 对话框

本文链接：https://blog.csdn.net/caijunfen/article/details/81172809

版权

前端同时被 3 个专栏收录

50 篇文章 2 订阅

订阅专栏

ant design

5 篇文章 0 订阅

订阅专栏

react

1 篇文章 0 订阅

订阅专栏

import { Switch, Modal,} from 'antd';

const confirm = Modal.confirm;



state = {

is_switch: Math.random() > 0.5,



};



<Switch

checked={this.state.is_switch}

checkedChildren="禁用"

unCheckedChildren="启用"

onChange={this.onChange}

}

/>



onChange = (checked) => {

console.log(checked);

const that = this;

var title = checked ? "启用" : "禁用";

console.log(title);



confirm({

title: `确定要${title}吗？`,

content: '',

okText: '确定',

cancelText: '取消',

onOk() {

if (checked) {

that.setState({ is_switch: checked });

} else {

//

that.setState({ is_switch: checked });

}



console.log('OK');

},

onCancel() {

console.log('Cancel');

},

});

};