用ant-design在react js中提交后清除表单输入字段值

Question

我使用 react 创建了一个注册页面。在那里，我使用了以下注册表单。 https://ant.design/components/form。所有验证均已正确处理，成功尝试后用户可以注册到系统。我遇到的唯一问题是，提交后无法清除表单输入字段值。

我已经实现了一种将表单字段值清除为空的方法。但它不起作用。而且我在stackoverflow中尝试了以前的类似问题，但仍然无法为我找到一个可行的问题。原因可能是因为我使用的是 ant 设计模板。

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

        }
      });
  }
  }

我可能在哪里出错，我该如何解决？

Answer 1

我们可以使用蚂蚁设计library给出的表单道具中的resetFields函数清除表单数据。

表单提交成功后，使用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);

Live Demo

希望对你有帮助:)

Answer 2

在函数组件中，您可以使用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 及更高版本。在早期版本中，表单似乎更难处理。

Answer 3

非常简单的解决方案： 把这一行放在功能组件里就行了

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}));
      }
  }

Answer 4

form.resetFields() 将重置所有表单字段。

重置特定表单字段form.resetFields([formItemName])

FormInstance

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;

Answer 5

1. 新建一个Button并设置onclick()。
2. 然后在点击按钮时调用 this.props.form.resetFields() 您在上面创建的。
3. 为此，您需要将组件导出为导出默认值 Form.create()(YourComponent);

Answer 6

1. 使用 resetForm() 重置整个表单的最简单方法。

form.resetFields()

1. 对于那些要更改默认值的输入，可以使用 setFieldsValue() 指定。

...
onChange={() => form.setFieldsValue({ name: '' })}
...