javascript - 在reactjs中提交后Antd清除表单

Question

我正在使用 antd 模板进行表单设计。提交表单后，输入值没有被清除。
我试过this.props.form.resetFields()它不工作得到以下错误

Unhandled Rejection (TypeError): Cannot read property 'resetFields' of undefined

codesandbox.io/s/funny-wright-oyd72?file=/src/App.js

import React, { Component, useState } from 'react';
import PropTypes from 'prop-types';
import {
    Form,
    Input, Layout,
    Divider,
    Tooltip,
    Cascader,
    Select,
    Row,
    Col,
    Checkbox,
    Button,
    AutoComplete, InputNumber, DatePicker,
} from 'antd';
import axios from 'axios';
import { withRouter } from "react-router-dom";
import moment from 'moment';
import { QuestionCircleOutlined } from '@ant-design/icons';
import countries from './countrys.json'
import SweetAlert from 'sweetalert-react';
import 'sweetalert/dist/sweetalert.css';


const { TextArea } = Input;
const { Option } = Select;
const { Header, Content } = Layout;
const {form} = Form
class Registration extends Component {

    constructor(props) {
        super(props);
        this.state = {
            customerName: "",
            username: "",
            password: "",
            address: "",
            country: "",
            state: "",
            email: "",
            contactNumber: null,
            dob: "",
            customerAge: null,
            citizenStatus: "",
            accountType: "",
            branchName: "",
            initDepositAmount: null,
            initProofType: "",
            initDocumentNo: "",
            stateList: []
        }
      

    }

    // handle change text
    handleChangeText = (value, name) => {
        this.setState({ [name]: value }, () => {
            if (name == 'dob') {
                this.handleChange_age(value)
            }
        })
    }

    handleChangeCountry = (countryName) => {
        let countrList = countries.countries;
        let countryObject = countrList.find(k => k.country == countryName);
        this.setState({
            ...this.state,
            stateList: countryObject.states,
            country: countryName
        })
    }

    //submit form
    submitForm = () => {
        const { stateList, ...withoutStateList } = this.state;
        axios({
            method: 'post',
            url: 'http://localhost:3333/registration',
            data: withoutStateList
          }).then(response => {
            this.setState({ 
                show: true 
            });
           // this.props.form.resetFields();
        })
    }

    // Cancel form
    navigateToLogin = () => {
        this.props.history.push({ pathname: '/login' })
    }

    //Check age and Citizen status
    handleChange_age = (dob) => {
        let currentAge = Math.abs((moment().year()) - (moment(dob, "DD/MM/YYYY").year()));
        let statusOfcitizen = null;
        if (currentAge < 18) {
            statusOfcitizen = "Minor";
        } else if (currentAge > 18 && currentAge <= 60) {
            statusOfcitizen = "Normal";
        } else if (currentAge > 60) {
            statusOfcitizen = "Senior";
        }
        this.setState({
            ...this.state,
            customerAge: currentAge,
            citizenStatus: statusOfcitizen
        })
    }

    render() {
        const formItemLayout = {
            labelCol: {
                xs: { span: 24 },
                sm: { span: 9 },
            },
            wrapperCol: {
                xs: { span: 24 },
                sm: { span: 6 },
            },
        };
        const tailFormItemLayout = {
            wrapperCol: {
                xs: { span: 24, offset: 0, },
                sm: { span: 21, offset: 0, },
            },
        };
        function disabledDate(current) {
            return current && current > moment().endOf('day');
        }
        return (
            <div>
                <Divider>New Registration</Divider>
                <Form
                    {...formItemLayout}
                    name="register"
                    scrollToFirstError
                    onFinish={() => this.submitForm()}
                    ref={this.formRef}
                >

                    <Form.Item
                        name="customerName"
                        label="Name"
                        rules={[
                            {
                                required: true,
                                message: 'Please input your name!',
                                whitespace: true
                            }, {
                                pattern: /^([a-z]+\s)*[a-z]+$/,
                                message: 'Please input alphabets only!',
                            }
                        ]}
                    >
                        <Input onChange={e => this.handleChangeText(e.target.value, "customerName")} />
                    </Form.Item>

                    <Form.Item
                        name="username"
                        label="Username"
                        rules={[
                            {
                                required: true,
                                message: 'Please input your username!',
                                whitespace: true,
                            },
                        ]}
                    >
                        <Input onChange={e => this.handleChangeText(e.target.value, "username")} />
                    </Form.Item>

                    <Form.Item
                        name="password"
                        label="Password"
                        rules={[
                            {
                                required: true,
                                message: 'Please input your password!',
                            },
                        ]}
                    >
                        <Input.Password onChange={e => this.handleChangeText(e.target.value, "password")} />
                    </Form.Item>

                    <Form.Item
                        name="address"
                        label="Address"
                        rules={[
                            {
                                required: true,
                                message: 'Please input your Address!',
                                whitespace: true,
                            },
                        ]}
                    >
                        <TextArea onChange={e => this.handleChangeText(e.target.value, "address")} />
                    </Form.Item>


                    <Form.Item
                        name="country"
                        label="Country"
                        rules={[
                            {
                                required: true,
                                message: 'Please input your Country!'
                            },
                        ]}
                    >
                        <Select
                            showSearch
                            placeholder="Select a country"
                            optionFilterProp="children"
                            onChange={e => this.handleChangeCountry(e)}
                            filterOption={(input, option) =>
                                option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
                            }
                        >
                            {
                                countries.countries.map((cname, i) => {
                                    return (
                                        <Option value={cname.country} key={i}>{cname.country}</Option>
                                    )
                                })
                            }
                        </Select>
                    </Form.Item>

                    <Form.Item
                        name="state"
                        label="State"
                        rules={[
                            {
                                required: true,
                                message: 'Please input your State!'
                            },
                        ]}
                    >
                        <Select
                            showSearch
                            placeholder="Select a state"
                            optionFilterProp="children"
                            onChange={e => this.handleChangeText(e, "state")}
                            filterOption={(input, option) =>
                                option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
                            }
                        >
                            {
                                this.state.stateList.map((sname, i) => {
                                    return (
                                        <Option value={sname} key={i}>{sname}</Option>
                                    )
                                })
                            }
                        </Select>
                    </Form.Item>

                    <Form.Item
                        name="email"
                        label="E-mail"
                        rules={[
                            {
                                type: 'email',
                                message: 'The input is not valid E-mail!',
                            },
                            {
                                required: true,
                                message: 'Please input your E-mail!',
                            },
                        ]}
                    >
                        <Input onChange={e => this.handleChangeText(e.target.value, "email")} />
                    </Form.Item>

                    <Form.Item
                        name="contactNumber"
                        label="Contact Number"
                        // validateStatus={this.state.validateStatus}
                        // help={this.state.errorMsg}
                        rules={[
                            {
                                required: true,
                                message: 'Please input your contact number!',
                                type: 'number'

                            },
                            {
                                pattern: /^[2-9]{2}[0-9]{8}$/,
                                message: 'Please input valid contact number!',
                            }
                        ]}
                    >

                        <InputNumber
                            min={0}
                            style={{ width: '100%' }}
                            onChange={e => this.handleChangeText(e, "contactNumber")}
                        />
                    </Form.Item>


                    <Form.Item
                        name="dob"
                        label="Date Of Birth"
                        rules={[
                            {
                                required: true,
                                message: 'Please input your date of birth!'
                            },
                        ]}
                    >
                        <DatePicker
                            format="DD/MM/YYYY"
                            disabledDate={disabledDate}
                            style={{ width: '100%' }}
                            onChange={e =>
                                this.handleChangeText(moment(e).format("DD/MM/YYYY"), "dob")
                            }
                        />
                    </Form.Item>

                    <Form.Item
                        name="currentAge"
                        label="Your age is"
                    >
                        <Input value={this.state.customerAge} disabled />
                        <span></span>
                    </Form.Item>


                    <Form.Item
                        name="citizenStatus"
                        label="Citizen Status"
                    >
                        <Input value={this.state.citizenStatus} disabled />
                        <span></span>
                    </Form.Item>

                    <Form.Item
                        name="accountType"
                        label="Account Type"
                        rules={[
                            {
                                required: true,
                                message: 'Please input your account type!'
                            },
                        ]}
                    >
                        <Select
                            showSearch
                            placeholder="Select a account type"
                            optionFilterProp="children"
                            filterOption={(input, option) =>
                                option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
                            }
                            onChange={e => this.handleChangeText(e, "accountType")}
                        >
                            <Option value="salary">Salary</Option>
                            <Option value="saving">Saving</Option>
                        </Select>

                    </Form.Item>
                    <Form.Item
                        name="branchName"
                        label="Branch Name"
                        rules={[
                            {
                                required: true,
                                message: 'Please input your branch name!',
                                whitespace: true,
                            },
                        ]}
                    >
                        <Input onChange={e => this.handleChangeText(e.target.value, "branchName")} />
                    </Form.Item>

                    <Form.Item
                        name="initDepositAmount"
                        label="Initial Deposit Amount"
                        rules={[
                            {
                                required: true,
                                message: 'Please input your Initial Deposit Amount!'
                            },
                        ]}
                    >
                        <InputNumber
                            min={1}
                            style={{ width: '100%' }}
                            onChange={e => this.handleChangeText(e, "initDepositAmount")}
                        />
                    </Form.Item>

                    <Form.Item
                        name="initProofType"
                        label="Identiication Proof Type"
                        rules={[
                            {
                                required: true,
                                message: 'Please input your Identiication Proof Type!',
                                whitespace: true,
                            },
                        ]}
                    >
                        <Input onChange={e => this.handleChangeText(e.target.value, "initProofType")} />
                    </Form.Item>

                    <Form.Item
                        name="initDocumentNo"
                        label="Identiication Document No"
                        rules={[
                            {
                                required: true,
                                message: 'Please input your Identiication Document No!',
                                whitespace: true,
                            },
                        ]}
                    >
                        <Input onChange={e => this.handleChangeText(e.target.value, "initDocumentNo")} />
                    </Form.Item>

                    <Form.Item {...tailFormItemLayout}>
                        <Button type="primary" htmlType="submit">
                            Register
                        </Button>
                        <Button type="default" style={{ margin: '0 8px' }} onClick={this.navigateToLogin}>
                            Cancel
                        </Button>
                    </Form.Item>
                </Form>
                <SweetAlert
                    show={this.state.show}
                    title="Done"
                    text="Registered Successfully"
                    success
                    onConfirm={() => this.setState({ show: false })}
                />
            </div>
        );
    }
}

Registration.propTypes = {

};

export default withRouter(Registration);

Answer 1

首先你不需要使用this.props .当您像这样导入时。如果您仍然需要 Prop 形式，您需要Form.create Ant 的api。 form没有从 Form 导出api。更好的方法是你已经定义了 ref。通过以下方式访问表单值:

定义引用

  formRef = React.createRef();

传入 formRef 对象:

<Form
          {...formItemLayout}
          name="register"
          scrollToFirstError
          onFinish={() => this.submitForm()}
          ref={this.formRef}
        >

访问表单值并使用它来重置您的字段:

  //submit form
  submitForm = () => {
    console.log("Form submitted:", this.formRef, Form);
    this.formRef.current.resetFields();
  };

更新沙盒链接:
https://codesandbox.io/s/admiring-noether-71cnt?file=/src/App.js:1302-1439