问题描述
我正在使用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,};
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!',]}
>
<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!',"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!',"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!',"initProofType")} />
</Form.Item>
<Form.Item
name="initDocumentNo"
label="Identiication Document No"
rules={[
{
required: true,message: 'Please input your Identiication Document No!',"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);解决方法
第一件事，您不需要使用<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table></table>
<button id="addrow">Add</button>。当您像这样导入时。如果您仍然需要道具的形式，则需要使用this.props蚂蚁API。 Form.create并不是从form api导出的任何内容。更好的方法是您已经定义了引用。通过以下方式访问表单值：
- 定义参考
Form- 传递formRef对象：
formRef = React.createRef();
- 访问表单值并使用它重置您的字段：
<Form
{...formItemLayout}
name="register"
scrollToFirstError
onFinish={() => this.submitForm()}
ref={this.formRef}
>
更新的沙箱链接：
https://codesandbox.io/s/admiring-noether-71cnt?file=/src/App.js:1302-1439
,更改密钥将使其重新安装（重新加载initialValues）：
<Form key={this.state.formKey}/>
然后重置它：
this.setState({formKey: (this.state.formKey || 0) + 1})