Ant Designのフォームリセットフィールドの方法

1. 方法1: フォームインスタンスのresetFieldsメソッドを使用する方法

Ant Designのフォームコンポーネントは、フォームインスタンスを返します。このインスタンスを使用して、フォームのフィールドをリセットすることができます。

import { Form, Button } from 'antd';
import { useState } from 'react';
const MyFormComponent = () => {
  const [form] = Form.useForm();
  const handleReset = () => {
    form.resetFields();
  };
  return (
    <Form form={form}>
      {/* フォームフィールドのコンポーネントを配置する */}
      {/* ... */}
      <Button onClick={handleReset}>リセット</Button>
    </Form>
  );
};

2. 方法2: フォームコンポーネントのkeyを変更する方法

フォームコンポーネントのkeyプロパティを変更することで、フォームをリセットすることができます。keyを変更すると、フォームの内部状態が初期化されます。

import { Form, Button } from 'antd';
import { useState } from 'react';
const MyFormComponent = () => {
  const [formKey, setFormKey] = useState(0);
  const handleReset = () => {
    setFormKey(prevKey => prevKey + 1);
  };
  return (
    <Form key={formKey}>
      {/* フォームフィールドのコンポーネントを配置する */}
      {/* ... */}
      <Button onClick={handleReset}>リセット</Button>
    </Form>
  );
};

上記の例では、Ant DesignのFormコンポーネントを使用してフォームを作成し、リセットボタンを追加しています。フォームをリセットするためのシンプルで簡単な方法として、resetFieldsメソッドとkeyプロパティの変更を紹介しました。

これらの方法を使用することで、Ant Designのフォームをリセットし、フィールドを初期状態に戻すことができます。詳細な実装や応用的な使用方法については、Ant Designの公式ドキュメントを参照してください。