react+antd清空表单

在React中，清空表单可以通过Antd的Form组件提供的`resetFields`方法来实现。具体步骤如下：

1. 在表单的父组件中引入`Form`组件，并将表单的所有控件都用`Form.Item`包裹起来，每个`Form.Item`需要设置`name`属性，这个属性值需要与`getFieldDecorator`方法中的`id`参数保持一致。

import { Form, Input, Button } from 'antd';

class MyForm extends React.Component {
  render() {
    const { getFieldDecorator } = this.props.form;
    return (
      <Form>
        <Form.Item label="用户名" name="username">
          {getFieldDecorator('username')(<Input />)}
        </Form.Item>
        <Form.Item label="密码" name="password">
          {getFieldDecorator('password')(<Input.Password />)}
        </Form.Item>
        <Form.Item>
          <Button type="primary" onClick={this.handleSubmit}>提交</Button>
          <Button onClick={this.handleReset}>重置</Button>
        </Form.Item>
      </Form>
    );
  }
}

2. 在表单的父组件中定义`handleSubmit`和`handleReset`方法。`handleSubmit`方法用于提交表单，`handleReset`方法用于清空表单。

class MyForm extends React.Component {
  handleSubmit = e => {
    e.preventDefault();
    this.props.form.validateFields((err, values) => {
      if (!err) {
        console.log('Received values of form: ', values);
      }
    });
  };

  handleReset = () => {
    this.props.form.resetFields();
  };
  
  render() {
    //...
  }
}

3. 在表单的父组件中将`MyForm`组件包裹在`Form.create`函数中，生成一个新的高阶组件，并将其导出。

const WrappedMyForm = Form.create({ name: 'my_form' })(MyForm);
export default WrappedMyForm;

这样，当用户点击表单中的“重置”按钮时，表单中的所有控件都会被清空。如果想要清空表单中的某一个控件，可以通过`setFieldsValue`方法来清空，具体可见前面的回答。