react +Ant design 新增、编辑、删除模态框(获取id)

最新推荐文章于 2024-08-22 16:54:59 发布

置顶

文文同学

最新推荐文章于 2024-08-22 16:54:59 发布

阅读量7.5k

点赞数 2

分类专栏：前端文章标签： react Ant design 新增编辑模态框

本文链接：https://blog.csdn.net/qq_42360843/article/details/94564423

版权

本文介绍了如何使用React和Ant Design库创建新增、编辑和删除功能的模态框。在新增模态框中，重点在于绑定事件和设置对话框参数。编辑模态框与新增类似，但需获取并使用当前行的id进行数据更新。删除模态框通过官方实例改编，关键在于绑定适当的事件处理方法。

摘要由CSDN通过智能技术生成

一、新增模态框
首先绑定事件：
在这里插入图片描述
Ant design 里 modal 对话框
按照自己的需求，修改下参数：

import { Modal, Button } from 'antd';

class Ad extends React.Component {
 constructor(props) {
    super(props);
    this.state = {  
        newAdd: false, // 新增的
    };
}
   //请求数据
    componentDidMount() {
        this.init()
    }
    init(){
        axios.get(`接口地址`).then( res => {
            // console.log(res)
            this.setState({
                data:res.data.data
            })
        })
    }
   handleChange = e => {
        this.setState(
            {
                checkNick: e.target.checked,
            },
            () => {
                this.props.form.validateFields(['sort'], { force: true });
            },
        );
    };
//新增模态框
  addForm = () => {
    this.setState