React-ant-design关于Modal中Confirm内部中this指向问题
发布日期:2021-05-20 10:06:18 浏览次数:18 分类:技术文章

本文共 1863 字,大约阅读时间需要 6 分钟。

1、 这是官方组件代码,这里需要注意的是

在confirm中,this指向永远在其内部中,这就是容易踩坑的点。

confirm({
title: 'Do you want to delete these items?', content: 'When clicked the OK button, this dialog will be closed after 1 second', onOk() {
return new Promise((resolve, reject) => {
setTimeout(Math.random() > 0.5 ? resolve : reject, 1000); }).catch(() => console.log('Oops errors!')); },

2、以失败的案例为例,错误写法

// 恢复列表数据  handlerecoverList = () => {
Modal.confirm({
title: '确认删除吗', okText: '确认', cancelText: '取消', onOk() {
//代码执行到这里的时候就会出错了 const {
selectedRows } = this.state; const {
dispatch } = this.props; const idList = []; selectedRows.forEach((item) => {
const id = item.registrationId; idList.push(id); }) if (idList.length === 0) {
message.error('请先勾选数据') } dispatch({
type: 'recycleBin/batchRecoverList', payload: {
registrationIdList: idList, }, }).then(() => {
this.getPageList() }); } }); }

3、正确写法是

const _this = this;

// 恢复列表数据  handlerecoverList = () => {
//注意这里写法 const {
selectedRows } = this.state; const {
dispatch } = this.props; const _this = this; Modal.confirm({
title: '确认删除吗', okText: '确认', cancelText: '取消', onOk() {
const idList = []; selectedRows.forEach((item) => {
const id = item.registrationId; idList.push(id); }) if (idList.length === 0) {
message.error('请先勾选数据') } dispatch({
type: 'recycleBin/batchRecoverList', payload: {
registrationIdList: idList, }, }).then(() => {
_this.getPageList() }); } }); }

转载地址:https://blog.csdn.net/weixin_45416217/article/details/103781355 如侵犯您的版权,请留言回复原文章的地址,我们会给您删除此文章,给您带来不便请您谅解!

上一篇:React-ant-design-pro项目搭建侧边菜单栏构建问题
下一篇:React-ant-design表格组件进行批量删除方法(案例详解)

发表评论

最新留言

网站不错 人气很旺了 加油
[***.192.178.218]2024年04月19日 21时32分22秒

关于作者

    喝酒易醉,品茶养心,人生如梦,品茶悟道,何以解忧?唯有杜康!
-- 愿君每日到此一游!

推荐文章