Очистить поля ввода формы после отправки в ответ js с ant-design
Я был создан на странице регистрации с использованием реакции. Там я использовал следующую регистрационную форму. https://ant.design/components/form. Все проверки были выполнены правильно, и после успешной попытки пользователь может зарегистрироваться в системе. Единственная проблема, с которой я столкнулся, это невозможность очистки значений поля ввода формы после отправки.
Я реализовал метод очистки значений поля формы до нуля. Но это не сработало. И я пробовал предыдущие подобные вопросы в stackru, но все еще не мог получить работоспособный для меня. Причина этого может быть, так как я использую шаблон дизайна муравья.
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
}
});
}
}
Где я мог ошибиться и как я могу решить эту проблему?
6 ответов
Мы можем очистить данные формы, используя resetFields
дано библиотекой дизайна муравьев.
После успешной отправки формы используйте this.props.form.resetFiels()
очистить данные в форме.
Код:
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);
Надеюсь, поможет:)
В функциональном компоненте вы можете очень легко получить доступ к форме, используя 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 и новее. Похоже, что в более ранних версиях с формами было намного труднее работать.
form.resetField()
сбросит все поля формы.
Чтобы сбросить определенное поле формы
form.resetField([formItemName])
Очень простое решение: просто поместите эту строку в функциональный компонент
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: '' })}
...
- Создайте новую кнопку и установите onclick().
- Затем вызовите this.props.form.resetFields() при нажатии кнопки, которую вы создали выше.
- Для всего этого вам нужно экспортировать свой компонент как экспорт по умолчанию Form.create()(YourComponent);