antd form表单内容清空

如果你想要清空一个 Ant Design 的 Form 表单中的内容，可以使用以下方法：

1. 通过 ref 获取 Form 实例，然后调用 resetFields 方法。

import { Form } from 'antd';

// 在 render 函数中获取 ref
<Form ref={formRef}>...</Form>

// 在某个事件中调用 resetFields 方法
formRef.current.resetFields();

2. 通过 Form 组件的 onReset 回调函数来处理表单清空的逻辑。

import { Form } from 'antd';

// 在 Form 组件中设置 onReset 回调函数
<Form onReset={() => { form.resetFields(); }}>...</Form>

以上两种方法都可以清空 Form 表单中的所有输入内容。

相关问题

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`方法来清空，具体可见前面的回答。

react antd 表单提交完成需要清空关闭组件

好的，针对你的问题，我可以给出以下的解决方案：

1. 在表单提交成功后，执行清空表单操作，并将弹窗组件关闭。
2. 可以通过在父组件中维护一个状态变量，控制弹窗组件的显示和隐藏。表单提交成功后，将该状态变量设置为 false，即可关闭弹窗组件。

具体的实现方式，可以参考以下代码：

import React, { useState } from 'react';
import { Modal, Form, Input, Button } from 'antd';

const ExampleForm = (props) => {
  const [form] = Form.useForm();
  const [visible, setVisible] = useState(false);

  const handleSubmit = () => {
    form.validateFields().then((values) => {
      // 提交表单
      console.log(values);

      // 清空表单
      form.resetFields();

      // 关闭弹窗组件
      setVisible(false);
    });
  };

  return (
    <>
      <Button onClick={() => setVisible(true)}>打开弹窗</Button>
      <Modal
        title="示例弹窗"
        visible={visible}
        onCancel={() => setVisible(false)}
        footer={[
          <Button key="cancel" onClick={() => setVisible(false)}>
            取消
          </Button>,
          <Button key="submit" type="primary" onClick={handleSubmit}>
            提交
          </Button>,
        ]}
      >
        <Form form={form}>
          <Form.Item
            label="姓名"
            name="name"
            rules={[{ required: true, message: '请输入姓名' }]}
          >
            <Input />
          </Form.Item>
          <Form.Item
            label="邮箱"
            name="email"
            rules={[{ required: true, message: '请输入邮箱' }]}
          >
            <Input />
          </Form.Item>
        </Form>
      </Modal>
    </>
  );
};

export default ExampleForm;

在上述代码中，我们使用了 `useState` 钩子来维护弹窗组件的状态变量 `visible`，并在表单提交成功后将其设置为 false，以关闭弹窗组件。同时，我们也使用了 `Form` 组件来进行表单的管理，通过 `form.resetFields()` 方法来清空表单。在弹窗组件的底部，我们添加了取消和提交按钮，点击提交按钮时，会调用 `handleSubmit` 函数来提交表单。