背景:为了获取from表单里面的数据,试了无数遍之后总结了以下方法:
modal修改按钮和去掉按钮的方法(另外一个博主写的,挺详细)
react使用Ant Design 的table组件添加button按钮后,按钮怎么获取当前行数据
我的弹框里面有Input,Select,InputNumber,DatePicker,所以使用数据双向绑定(以下有代码)疯狂报错,最后在看了官方文档自己琢磨之后选择了下面的方法获取数据;
原理:
利用form的onFinish属性直接绑定函数获取当前表单的值,然后将modal的按钮去掉,因为只有form表单里面的按钮并且属性htmlType="submit"点击才可以执行onFinish那个函数(自己测试之后发现的,如果有描述不正确的欢迎指出!)
代码:
import React, {
Component } from 'react';
import {
Table, Button, Modal, Form, DatePicker, Select, Input, InputNumber } from 'antd';
import axios from 'axios';
import {
GET_YOUHUIQUAN, GET_ADDYOUHUIQUAN } from '../../utils/api'
class Youhuiquanguanli extends Component {
formRef = React.createRef();
state = {
data: [],
setVisible: false,
}
xiugai = (row) => () => {
console.log(row)
}
// add显示弹框
showModal = () => {
this.setState({
setVisible: true
})
};
handleCancel = () => {
this.setState({
setVisible: false
})
this.formRef.current.resetFields();
};
// 时间转换
ChangeTime(d) {
return d.getFullYear() + '-' + (d.getMonth() + 1) + '-' + d.getDate() + ' ' + d.getHours() + ':' + d.getMinutes() + ':' + d.getSeconds();
}
onFinish = values => {
console.log(values);
// axios({
// url: GET_ADDYOUHUIQUAN,
// method: 'get',
// data: {
// coupons: {
// //