记录react+antd项目中使用Popconfirm及获取所点击行的数据

最新推荐文章于 2025-02-03 23:50:44 发布

腰果虾仁

最新推荐文章于 2025-02-03 23:50:44 发布

阅读量6.6k

点赞数 2

分类专栏： react.js 文章标签： reactjs javascript es6

本文链接：https://blog.youkuaiyun.com/weixin_42584321/article/details/104042939

版权

react.js 专栏收录该内容

4 篇文章

订阅专栏

本文介绍了在React项目中结合Ant Design的Popconfirm组件，如何实现点击按钮弹出确认提示并根据用户确认操作改变按钮的disabled属性。通过在Table组件中设置每个数据行的isDisabled变量，并在Popconfirm的onConfirm回调中更新该变量，从而控制按钮的禁用状态。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、首先使用点击Button弹出Popconfirm，再点击确定来控制disabled属性的true或者false，控制disabled属性通过控制一个变量就可以了。

1.首先看一下Popconfirm及Button的使用

<Popconfirm
title="是否确认？"
onConfirm={(e)=>{this.confirm(record)}} //点击确认的回调
onCancel={this.cancel}  //点击取消的回调
okText="确定"
cancelText="取消"
// disabled={data.isDisabled}
disabled={record.isDisabled}
>
	<Button disabled={record.isDisabled} type="primary" size='small' style={{marginRight:'10px'}} onClick={this.handleChange.bind(this,record)}>按钮</Button>
</Popconfirm>

2.通过循环遍历给每一条数据加一个变量(如果后端返回的数据有这个变量的话，请忽略此步骤)

for(let i=0;i<data.length;i++){
	data[i].isDisabled=false //给每条数据增加一个字段，并赋予初始值为false,data一般为从后端请求到的数据
}

3.当点击Button时，弹出Popconfirm，点击确认改变当前行isDisabled这个变量的值为true，我这里使用的antd中的Table，默认有三个属性（text, record, index），其中record为点击当前行的数据，所以将Button的disabled的属性通过record.isDisabled来控制（书写请看第一点中的代码）

    //点击Button弹出Popconfirm再点击确认时触发
    confirm=(record)=>{
        record.isDisabled=true  //这里仅改变了当前点击行的数据
        this.setState({data:[...this.state.data]}) //此处不用解构赋值也可更新数据
        message.success('确认');
    }

总结

我在这里踩到的坑主要是Popconfirm弹出点击确认后的回调函数的触发，一开始Popconfirm的onConfirm函数我是这样写的：

<Popconfirm onConfirm={this.confirm.bind(this,record)}>
	<Button>按钮</Button>
</Popconfirm>

然后我打印出来的e是当前行数据，而record是一个function。原因在于Popconfirm的onConfirm函数是一个回调函数，所以应该这样写：

<Popconfirm onConfirm={(e)=>{this.confirm(record)}}>
	<Button>按钮</Button>
</Popconfirm>

第一次写博客，主要是记录一下平时开发中被卡住的难点及解决方法，如有不对的地方，请大佬们指出~