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

一、新增模态框
首先绑定事件：

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({
      newAdd: true,
    });
  };
  
//新增模态框，新增按钮事件
handleaddOk = e => {
    console.log(e);
    this.props.form.validateFields( (err,values) => {
        if (!err) {
            console.info('success');
            axios.post(`接口地址`,values).then(res=>{
                console.log(res)
                this.props.history.push('/ad')  //新增成功，调整到广告首页
                this.setState({                      // 关闭模态框
                    newAdd: false, 
                })
                this.init() //数据初始化，页面刷新
            })
        }
    });
};

  handleCancel = e => {
    console.log(e);
    this.setState({
      newAdd: false,
    });
  };

  render() {
    return (
      

        
          Open Modal
        
        
        取消
    ,
    
        新增
    ,
]}
        >
         
    {getFieldDecorator('name', {
        rules: [
            {
                required: true,
                message: 'Please input your name',
            },
        ],

    })()}

        
      
    );
  }
}
const WrappedAdd = Form.create()(Ad);  //有form 表单，就必须 create
export default WrappedAdd;

二、编辑模态框
同理：按照上面的操作，把编辑的模态框拖进去，一一对应名字（请自己复制粘贴，修改好）。唯一不同的是，点击编辑按钮，需要获取当前行的id ,修改好后，点击 ‘更新’按钮，插入当前行id 里的数据里。（把这里的代码，和上面的代码，请都写在一起。取消的btn点击事件，请自己复制粘贴进去。）

绑定事件

  //编辑模态框 弹出
    editform = (text) =>{
        console.log(text.id)   //获取当前点击 行 的id
        this.setState({
            newEdit: true,  // 这是 编辑 模态框
        })
        let id = text.id;    
        axios.get(`接口地址/${id}/edit`)  //根据自己公司后端配置的接口地址来 ，获取页面初始化数据
            .then(res=>{
                console.log(res)
                this.setState({
                    list:res.data.data.advertisement    // 请在构造函数中 定义 list:{}
                });
                this.props.form.setFieldsValue({     // 双向绑定form 表单的数据
                    name:this.state.list.name,
                    sort:this.state.list.sort,
                    advertisement_node_id:this.state.list.advertisement_node_id,
                    photo_id:this.state.list.photo_id,
                    url:this.state.list.url,
                })
            })
    };

    //编辑模态框，更新按钮提交事件
    handleEditOk = e => {
        console.log(e);
        this.props.form.validateFields( (err,values) => {
            if (!err) {
                console.info('success');
            }
            axios.put(`接口地址/${this.state.list.id}`
                ,values).then(res=>{
                console.log(res)
                this.props.history.push('/ad')
                this.setState({
                    newEdit: false,
                })
                this.init()
            })
        });
    };




render() {
    return (
      


        
                            取消
                        ,
                        
                            更新
                        ,
                    ]}
        >
          
Some contents...
          
Some contents...
          
Some contents...
        
      
    );
  }

三、删除模态框
按照官方实例，进行复制粘贴 ，修改如下

绑定的事件：

方法如下：