如何在提交时清除ant design表单中的输入值 - Javascript

在ant design之前，清除表单中的输入值是相对容易的。但是使用ant design 表单会稍微复杂一些。在这篇文章中，我们将会介绍如何使用Javascript清除ant design 表单中的输入值。

首先，让我们看看一个简单的ant design表单：

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

const Demo = () => {
  const onFinish = values => {
    console.log('Received values of form:', values);
  };

  return (
    <Form onFinish={onFinish}>
      <Form.Item
        label="Username"
        name="username"
        rules={[{ required: true, message: 'Please input your username!' }]}
      >
        <Input />
      </Form.Item>

      <Form.Item
        label="Password"
        name="password"
        rules={[{ required: true, message: 'Please input your password!' }]}
      >
        <Input.Password />
      </Form.Item>

      <Form.Item>
        <Button type="primary" htmlType="submit">
          Submit
        </Button>
      </Form.Item>
    </Form>
  );
};

export default Demo;

这是一个基本的表单，在提交后会将表单中的值作为传递给onFinish函数。

在这个例子中，我们使用了Form、Input和Button组件。我们需要添加一个按钮或者其他触发器来清除输入值。

我们将使用Form组件方法resetFields来清除表单中的值。

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

const Demo = () => {
  const formRef = useRef(null);

  const onFinish = values => {
    console.log('Received values of form:', values);
  };

  const handleReset = () => {
    formRef.current.resetFields();
  }

  return (
    <Form onFinish={onFinish} ref={formRef}>
      <Form.Item
        label="Username"
        name="username"
        rules={[{ required: true, message: 'Please input your username!' }]}
      >
        <Input />
      </Form.Item>

      <Form.Item
        label="Password"
        name="password"
        rules={[{ required: true, message: 'Please input your password!' }]}
      >
        <Input.Password />
      </Form.Item>

      <Form.Item>
        <Button type="primary" htmlType="submit">
          Submit
        </Button>
        <Button onClick={handleReset}>
          Reset
        </Button>
      </Form.Item>
    </Form>
  );
};

export default Demo;

我们在这里创建了一个名为formRef的变量，用来访问Form的resetFields 方法。之后，我们在handleReset函数中调用resetFields方法。

我们在表单下方添加了一个按钮去触发handleReset事件。

这样，在点击“重置”按钮之后，我们就能清除所有输入值了。

上述内容已按markdown标示代码，完整介绍了如何在提交时清除ant design表单中的输入值。