react 使用ant.design使用modal里面嵌套form遇到的坑,modal修改按钮和去掉按钮的方法

本文总结了在React中使用Ant Design的Modal和Form组件时遇到的问题及解决方案。通过Modal的onFinish属性绑定函数获取表单数据,并介绍了如何修改或移除Modal的默认操作按钮,以避免数据绑定过程中的错误。代码示例展示了如何实现这一过程。
摘要由CSDN通过智能技术生成

背景:为了获取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: {
   
        //             //
  • 6
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值