背景：为了获取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: {
// // 优惠卷名称
// coupons_name:values.coupons_name ,
// // 优惠卷副标题
// coupons_subtitle: values.coupons_subtitle,
// // 优惠卷类型id
// coupons_type_id: values.coupons_type_id,
// //满多少
// coupons_available_price: values.coupons_available_price,
// //减多少
// coupons_reduction_price: values.coupons_reduction_price,
// // 优惠卷发放数量
// coupons_number: values.coupons_number,
// // 使用说明
// coupons_instructions: values.coupons_instructions
// },
// coupons_use_rules: {
// // 用户类型id
// user_type_id: values.user_type_id,
// // 优惠卷限领数量
// coupons_limit_number: values.coupons_limit_number,
// // start_time: this.ChangeTime(values.start_time._d),
// // end_time: this.ChangeTime(values.end_time._d),
// // 领取后有效时间
// valid_time: valuesvalid_time.
// }
// }
// }).then(data => {
// console.log(data)
// })
this.setState({
setVisible: false
})
this.formRef.current.resetFields();
};
componentDidMount() {
axios({
url: GET_YOUHUIQUAN,
method: 'get',
params: {
merchant_id: 1 }
}).then(data => {
this.setState({
data: data.data.data
})
console.log(this.state.data)
})
}
// 数据双向绑定
handleChange = (name, val) => {
// 更新状态
this.setState({
[name]: val //不是属性，是属性的值[name]
})
}
userChange = (name) => {
return (e) => this.handleChange(name, e.target.value)
}
render() {
const tableData = this.state.data
const columns = [
{
title: '优惠卷类型',
dataIndex: 'coupons_type_name',
key: 'coupons_type_name',
filters: [
{
text: '满减券', value: '满减' },
{
text: '立减券', value: '立减' },
{
text: '折扣券', value: '折扣' },
],
onFilter: (value, record) => record.coupons_type_name.includes(value),
},
{
title: '优惠卷名称',
dataIndex: 'coupons_name',
key: 'coupons_name',
},
{
title: '优惠卷发放数量',
dataIndex: 'coupons_number',
key: 'coupons_number',
sorter: (a, b) => a.fafangNum - b.fafangNum,
},
{
title: '优惠卷限领数量',
dataIndex: 'coupons_limit_number',
key: 'coupons_limit_number',
sorter: (a, b) => a.lingquNum - b.lingquNum,
},
{
title: '优惠卷使用说明',
dataIndex: 'coupons_instructions',
key: 'coupons_instructions',
},
{
title: '优惠卷有效期起始时间',
dataIndex: 'start_time',
key: 'start_time',
},
{
title: '优惠卷有限期结束时间',
dataIndex: 'end_time',
key: 'end_time',
},
{
title: '操作',
width: '100px',
align: 'center',
render: (row) =>
<div>
{
/* <Button style={
{ marginRight: '10px' }} danger>删除</Button> */}
<Button type='primary' onClick={
this.xiugai(row)}>修改</Button>
</div>
}
];
return (
<div>
<Button type="primary" onClick={
this.showModal}> 新增优惠券</Button>
{
/* 弹框 */}
<Modal
title="新增优惠券"
width={
800}
visible={
this.state.setVisible}
onCancel={
this.handleCancel}
destroyOnClose={
true}
footer={
[] // 设置footer为空，去掉 取消 确定默认按钮
}
>
<Form
ref={
this.formRef}
labelCol={
{
span: 6 }}
onFinish={
this.onFinish}
>
<p>基本信息</p>
<Form.Item name='coupons_name' label="优惠券名称：">
<Input placeholder="同程优品10元券" />
</Form.Item>
<Form.Item name='coupons_subtitle' label="优惠券副标题：" >
<Input placeholder="10元券" />
</Form.Item>
<Form.Item name='coupons_type_id' label="优惠类型：">
<Select>
<Select.Option value="1">满减券</Select.Option>
<Select.Option value="2">立减券</Select.Option>
<Select.Option value="3">折扣券</Select.Option>
</Select>
</Form.Item>
<Form.Item name='coupons_available_price' label="满：">
<Input />
</Form.Item>
<Form.Item name='coupons_reduction_price' label="减：">
<Input />
</Form.Item>
<Form.Item name='coupons_number' label="发放数量：">
<Input />
</Form.Item>
<Form.Item name='coupons_instructions' label="使用说明：">
<Input.TextArea />
</Form.Item>
<p>基本规则</p>
<Form.Item name='user_type_id' label="用户类型：">
<Select >
<Select.Option value="1">新用户</Select.Option>
<Select.Option value="2">老用户</Select.Option>
</Select>
</Form.Item>
<Form.Item name='coupons_limit_number' label="每人限领数量:">
<InputNumber />
</Form.Item>
<Form.Item name='start_time' label="有效期：">
<DatePicker />
</Form.Item>
<Form.Item name='end_time' label="至">
<DatePicker />
</Form.Item>
<Form.Item name='valid_time' label="有效天数：">
<Input />
</Form.Item>
<Button type="primary" htmlType="submit">保存 </Button>
<Button type="primary" onClick={
this.handleCancel}>取消 </Button>
</Form>
</Modal>
{
/* 表格 */}
<Table
pagination={
{
position: ['bottomCenter'], pageSize: 6 }}
columns={
columns}
dataSource={
tableData}
rowKey={
(record) => `complete${
record.coupons_id}`}
/>
</div>
);
}
}
export default Youhuiquanguanli;
我也是刚开始接触react，记录了一些自己遇到的坑，如果有不对或者疑问的，欢迎评论区指出！