使用ant-design在react js中提交后清除表单输入字段值
Clear form input field values after submitting in react js with ant-design
我使用 React 创建了一个注册页面。我在那里使用了以下注册表。 https://ant.design/components/form。所有验证均已正确处理,并且在成功尝试后用户可以注册到系统。我遇到的唯一问题是,提交后无法清除表单输入字段值。
我已经实现了一种将表单字段值清除为空的方法。但它不起作用。我在 Whosebug 中尝试了以前的类似问题,但仍然无法为我找到一个可行的问题。可能是因为我用的是ant design模板。
this.setState({
confirmDirty: false,
autoCompleteResult: [],
userName: '',
email: '',
experience: [],
password: ''
})
以上代码是清除输入值。但它不起作用,所有表单输入字段的值都保留了下来。下面是部分注册表单代码。
class RegistrationForm extends React.Component {
state = {
confirmDirty: false,
autoCompleteResult: [],
userName: '',
email: '',
experience: [],
password: ''
};
//below form is inside the render method and return
<Form onSubmit={this.handleSubmit}>
<FormItem
{...formItemLayout}
label="E-mail"
>
{getFieldDecorator('email', {
rules: [{
type: 'email', message: 'The input is not valid E-mail!',
}, {
required: true, message: 'Please input your E-mail!',
}],
})(
<Input />
)}
</FormItem>
</Form>
handleSubmit = (e) => {
e.preventDefault();
this.props.form.validateFieldsAndScroll((err, values) => {
if (!err) {
//submission done
//then execute the above code which I mentioned previously in the question, to reset the input fields value
}
});
}
}
哪里会出错,我该如何解决?
我们可以使用 ant design library 提供的表单道具中存在的 resetFields
函数清除表单数据 library。
表单提交成功后,使用this.props.form.resetFields()
清除表单中的数据
代码:
const { Form, Input, Tooltip, Icon, Cascader, Select, Row, Col, Checkbox, Button, AutoComplete, } = antd;
const { Option } = Select;
const AutoCompleteOption = AutoComplete.Option;
class RegistrationForm extends React.Component {
state = {
confirmDirty: false,
autoCompleteResult: [],
};
handleSubmit = (e) => {
e.preventDefault();
this.props.form.validateFieldsAndScroll((err, values) => {
if (!err) {
console.log('Received values of form: ', values);
}
});
}
handleConfirmBlur = (e) => {
const value = e.target.value;
this.setState({ confirmDirty: this.state.confirmDirty || !!value });
}
render() {
const { getFieldDecorator } = this.props.form;
const { autoCompleteResult } = this.state;
const formItemLayout = {
labelCol: {
xs: { span: 24 },
sm: { span: 8 },
},
wrapperCol: {
xs: { span: 24 },
sm: { span: 16 },
},
};
const tailFormItemLayout = {
wrapperCol: {
xs: {
span: 24,
offset: 0,
},
sm: {
span: 16,
offset: 8,
},
},
};
return (
<Form onSubmit={this.handleSubmit}>
<Form.Item
{...formItemLayout}
label="E-mail"
>
{getFieldDecorator('email', {
rules: [{
type: 'email', message: 'The input is not valid E-mail!',
}, {
required: true, message: 'Please input your E-mail!',
}],
})(
<Input />
)}
</Form.Item>
<Form.Item
{...formItemLayout}
label="Password"
>
{getFieldDecorator('password', {
rules: [{
required: true, message: 'Please input your password!',
}, {
validator: this.validateToNextPassword,
}],
})(
<Input type="password" />
)}
</Form.Item>
<Form.Item {...tailFormItemLayout}>
{getFieldDecorator('agreement', {
valuePropName: 'checked',
})(
<Checkbox>I have read the <a href="">agreement</a></Checkbox>
)}
</Form.Item>
<Form.Item {...tailFormItemLayout}>
<Button type="primary" htmlType="submit">Register</Button>
</Form.Item>
<Form.Item {...tailFormItemLayout}>
<Button onClick={e => {
this.props.form.resetFields()
}} >Clear</Button>
</Form.Item>
</Form>
);
}
}
const WrappedRegistrationForm = Form.create()(RegistrationForm);
ReactDOM.render(<WrappedRegistrationForm />, mountNode);
希望对您有所帮助:)
- 创建一个新的 Button 并设置 onclick()。
- 然后在点击按钮时调用this.props.form.resetFields()
您在上面创建的。
- 为此,您需要将组件导出为导出默认值
Form.create()(你的组件);
在函数组件中,您可以使用 Form.useForm
挂钩轻松访问表单。此挂钩返回的值应作为 Form
组件的 form
属性 传递。然后你可以在你想要清除表单的任何回调中调用表单上的 resetFields
。此示例将在提交时清除表单:
import React from 'react';
import { Button, Form, Input } from 'antd';
export default function MyFormComponent() {
const [form] = Form.useForm();
const submitForm = ({ name, favoriteColor }) => {
console.log(name, favoriteColor);
form.resetFields();
};
return (
<Form
form={form}
labelCol={{ span: 6 }}
wrapperCol={{ span: 12 }}
onFinish={submitForm}
>
<Form.Item name="name" label="What is your name?">
<Input />
</Form.Item>
<Form.Item name="favoriteColor" label="What is your favorite color?">
<Input />
</Form.Item>
<Form.Item wrapperCol={{ offset: 6, span: 12 }}>
<Button type="primary" htmlType="submit">
Submit
</Button>
</Form.Item>
</Form>
);
}
这仅适用于 antd 4.x 及更高版本。表单在早期版本中似乎更难使用。
非常简单的解决方案:
只需将这一行放在功能组件中
const [form] = Form.useForm();
<Form
form={form}
name="normal_login"
className="login-form"
initialValues={{
remember: true,
}}
/>
在将 form
调用到 onFinish()
函数之后。
const onFinish=(values)=>{
form.resetFields();
let array1=[];
if(Array.isArray(array1)){
array1=values;
localStorage.setItem(`${id}`,JSON.stringify({id,...array1}));
}
}
- 重置整个表单的最简单方法是使用 resetForm()。
form.resetFields()
- 对于那些您想要更改默认值的输入,您可以使用 setFieldsValue() 指定它。
...
onChange={() => form.setFieldsValue({ name: '' })}
...
form.resetFields()
将重置所有表单字段。
重置特定表单字段form.resetFields([formItemName])
import React, { useState } from "react";
import { Form, Input } from "antd";
const myComp = () => {
const [form] = Form.useForm();
const [val, setVal] = useState("");
const handleCancel = () => {
form.resetFields(); //reset form
};
const handleOk = async (e) => {
form.resetFields(); //reset form
};
const handelChange = async (e) => {
setVal(e.target.value);
if(val.length > 10) {
form.resetFields(["textField"]); //reset particular field
}
};
return (
<Form
form={form}
name="dynamic_ruleEdit"
onFinish={handleOk}
>
<Form.Item
name="textField"
label="Enter your details"
rules={[
{
message: "Enter details",
required: true,
},
]}
>
<Input
value={val}
placeholder="Enter details"
onChange={handelChange}
/>
</Form.Item>
</Form>
);
}
export default myComp;
我使用 React 创建了一个注册页面。我在那里使用了以下注册表。 https://ant.design/components/form。所有验证均已正确处理,并且在成功尝试后用户可以注册到系统。我遇到的唯一问题是,提交后无法清除表单输入字段值。
我已经实现了一种将表单字段值清除为空的方法。但它不起作用。我在 Whosebug 中尝试了以前的类似问题,但仍然无法为我找到一个可行的问题。可能是因为我用的是ant design模板。
this.setState({
confirmDirty: false,
autoCompleteResult: [],
userName: '',
email: '',
experience: [],
password: ''
})
以上代码是清除输入值。但它不起作用,所有表单输入字段的值都保留了下来。下面是部分注册表单代码。
class RegistrationForm extends React.Component {
state = {
confirmDirty: false,
autoCompleteResult: [],
userName: '',
email: '',
experience: [],
password: ''
};
//below form is inside the render method and return
<Form onSubmit={this.handleSubmit}>
<FormItem
{...formItemLayout}
label="E-mail"
>
{getFieldDecorator('email', {
rules: [{
type: 'email', message: 'The input is not valid E-mail!',
}, {
required: true, message: 'Please input your E-mail!',
}],
})(
<Input />
)}
</FormItem>
</Form>
handleSubmit = (e) => {
e.preventDefault();
this.props.form.validateFieldsAndScroll((err, values) => {
if (!err) {
//submission done
//then execute the above code which I mentioned previously in the question, to reset the input fields value
}
});
}
}
哪里会出错,我该如何解决?
我们可以使用 ant design library 提供的表单道具中存在的 resetFields
函数清除表单数据 library。
表单提交成功后,使用this.props.form.resetFields()
清除表单中的数据
代码:
const { Form, Input, Tooltip, Icon, Cascader, Select, Row, Col, Checkbox, Button, AutoComplete, } = antd;
const { Option } = Select;
const AutoCompleteOption = AutoComplete.Option;
class RegistrationForm extends React.Component {
state = {
confirmDirty: false,
autoCompleteResult: [],
};
handleSubmit = (e) => {
e.preventDefault();
this.props.form.validateFieldsAndScroll((err, values) => {
if (!err) {
console.log('Received values of form: ', values);
}
});
}
handleConfirmBlur = (e) => {
const value = e.target.value;
this.setState({ confirmDirty: this.state.confirmDirty || !!value });
}
render() {
const { getFieldDecorator } = this.props.form;
const { autoCompleteResult } = this.state;
const formItemLayout = {
labelCol: {
xs: { span: 24 },
sm: { span: 8 },
},
wrapperCol: {
xs: { span: 24 },
sm: { span: 16 },
},
};
const tailFormItemLayout = {
wrapperCol: {
xs: {
span: 24,
offset: 0,
},
sm: {
span: 16,
offset: 8,
},
},
};
return (
<Form onSubmit={this.handleSubmit}>
<Form.Item
{...formItemLayout}
label="E-mail"
>
{getFieldDecorator('email', {
rules: [{
type: 'email', message: 'The input is not valid E-mail!',
}, {
required: true, message: 'Please input your E-mail!',
}],
})(
<Input />
)}
</Form.Item>
<Form.Item
{...formItemLayout}
label="Password"
>
{getFieldDecorator('password', {
rules: [{
required: true, message: 'Please input your password!',
}, {
validator: this.validateToNextPassword,
}],
})(
<Input type="password" />
)}
</Form.Item>
<Form.Item {...tailFormItemLayout}>
{getFieldDecorator('agreement', {
valuePropName: 'checked',
})(
<Checkbox>I have read the <a href="">agreement</a></Checkbox>
)}
</Form.Item>
<Form.Item {...tailFormItemLayout}>
<Button type="primary" htmlType="submit">Register</Button>
</Form.Item>
<Form.Item {...tailFormItemLayout}>
<Button onClick={e => {
this.props.form.resetFields()
}} >Clear</Button>
</Form.Item>
</Form>
);
}
}
const WrappedRegistrationForm = Form.create()(RegistrationForm);
ReactDOM.render(<WrappedRegistrationForm />, mountNode);
希望对您有所帮助:)
- 创建一个新的 Button 并设置 onclick()。
- 然后在点击按钮时调用this.props.form.resetFields() 您在上面创建的。
- 为此,您需要将组件导出为导出默认值 Form.create()(你的组件);
在函数组件中,您可以使用 Form.useForm
挂钩轻松访问表单。此挂钩返回的值应作为 Form
组件的 form
属性 传递。然后你可以在你想要清除表单的任何回调中调用表单上的 resetFields
。此示例将在提交时清除表单:
import React from 'react';
import { Button, Form, Input } from 'antd';
export default function MyFormComponent() {
const [form] = Form.useForm();
const submitForm = ({ name, favoriteColor }) => {
console.log(name, favoriteColor);
form.resetFields();
};
return (
<Form
form={form}
labelCol={{ span: 6 }}
wrapperCol={{ span: 12 }}
onFinish={submitForm}
>
<Form.Item name="name" label="What is your name?">
<Input />
</Form.Item>
<Form.Item name="favoriteColor" label="What is your favorite color?">
<Input />
</Form.Item>
<Form.Item wrapperCol={{ offset: 6, span: 12 }}>
<Button type="primary" htmlType="submit">
Submit
</Button>
</Form.Item>
</Form>
);
}
这仅适用于 antd 4.x 及更高版本。表单在早期版本中似乎更难使用。
非常简单的解决方案: 只需将这一行放在功能组件中
const [form] = Form.useForm();
<Form
form={form}
name="normal_login"
className="login-form"
initialValues={{
remember: true,
}}
/>
在将 form
调用到 onFinish()
函数之后。
const onFinish=(values)=>{
form.resetFields();
let array1=[];
if(Array.isArray(array1)){
array1=values;
localStorage.setItem(`${id}`,JSON.stringify({id,...array1}));
}
}
- 重置整个表单的最简单方法是使用 resetForm()。
form.resetFields()
- 对于那些您想要更改默认值的输入,您可以使用 setFieldsValue() 指定它。
...
onChange={() => form.setFieldsValue({ name: '' })}
...
form.resetFields()
将重置所有表单字段。
重置特定表单字段form.resetFields([formItemName])
import React, { useState } from "react";
import { Form, Input } from "antd";
const myComp = () => {
const [form] = Form.useForm();
const [val, setVal] = useState("");
const handleCancel = () => {
form.resetFields(); //reset form
};
const handleOk = async (e) => {
form.resetFields(); //reset form
};
const handelChange = async (e) => {
setVal(e.target.value);
if(val.length > 10) {
form.resetFields(["textField"]); //reset particular field
}
};
return (
<Form
form={form}
name="dynamic_ruleEdit"
onFinish={handleOk}
>
<Form.Item
name="textField"
label="Enter your details"
rules={[
{
message: "Enter details",
required: true,
},
]}
>
<Input
value={val}
placeholder="Enter details"
onChange={handelChange}
/>
</Form.Item>
</Form>
);
}
export default myComp;