Очистить поля ввода формы после отправки в ответ 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);

Live Demo

Надеюсь, поможет:)

Источник

В функциональном компоненте вы можете очень легко получить доступ к форме, используя 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}));
      }
  }
Источник
  1. Самый простой способ сбросить всю форму вы используете resetForm().
      form.resetFields()
  1. Для тех входов, которые вы хотите изменить значение по умолчанию, вы можете указать его с помощью setFieldsValue().
      ...
onChange={() => form.setFieldsValue({ name: '' })}
...
Источник
  1. Создайте новую кнопку и установите onclick().
  2. Затем вызовите this.props.form.resetFields() при нажатии кнопки, которую вы создали выше.
  3. Для всего этого вам нужно экспортировать свой компонент как экспорт по умолчанию Form.create()(YourComponent);
Источник
Другие вопросы по тегам