如何在提交时清除Ant Design表单中的输入值 - 任何

Ant Design是一个非常流行的React UI库，其中的Form组件可以帮助开发者构建出优雅的表单。

在表单提交后，有时候我们需要清除表单中的输入值，以便用户可以开始输入新的数据。本文将介绍如何在Ant Design表单中实现这个功能。

步骤

1. 通过Ant Design中的Form.create()方法，将组件包装为高阶组件。

import { Form } from 'antd';

class MyForm extends React.Component {
  // 表单提交处理函数
  handleSubmit = e => { 
    // ... 
  };

  render() {
    return (
      <Form onSubmit={this.handleSubmit}>
        {/** 表单项 */}
      </Form>
    );
  }
}

export default Form.create()(MyForm);

2. 在表单提交处理函数中，调用form.resetFields()方法，清除所有表单项的值。

handleSubmit = e => { 
  e.preventDefault();
  
  const { form } = this.props;
  
  // 提交表单的数据校验
  form.validateFields((err, values) => {
    if (!err) {
      // 进行表单提交操作
      
      // 清空表单
      form.resetFields();
    }
  });
};

代码片段

import { Form } from 'antd';

class MyForm extends React.Component {
  handleSubmit = e => { 
    e.preventDefault();
    
    const { form } = this.props;
    
    form.validateFields((err, values) => {
      if (!err) {
        // 提交表单的数据校验
        
        // 清空表单
        form.resetFields();
      }
    });
  };

  render() {
    const { getFieldDecorator } = this.props.form;
    
    return (
      <Form onSubmit={this.handleSubmit}>
        <Form.Item>
          {getFieldDecorator('username', {
            rules: [
              { required: true, message: '请输入用户名' },
              { min: 4, max: 8, message: '用户名长度应该在4-8个字符之间' },
            ],
          })(
            <Input placeholder="用户名" />,
          )}
        </Form.Item>
        <Form.Item>
          {getFieldDecorator('password', {
            rules: [
              { required: true, message: '请输入密码' },
              { min: 6, max: 12, message: '密码长度应该在6-12个字符之间' },
            ],
          })(
            <Input type="password" placeholder="密码" />,
          )}
        </Form.Item>
        <Form.Item>
          <Button type="primary" htmlType="submit">提交</Button>
        </Form.Item>
      </Form>
    );
  }
}

export default Form.create()(MyForm);

在处理表单提交的函数handleSubmit()中，使用form.resetFields()方法清空表单所有项的值。注意，必须包装为高阶组件的Form.create()方法。同时，在表单提交之前，需要先进行数据校验，这部分内容可以根据业务需求进行修改。