React.jsでの制御されたフォームのリセット方法

フォームの初期値を使ってリセットする方法:

import React, { useState } from 'react';
function MyForm() {
  const [formData, setFormData] = useState({ name: '', email: '' });
  const resetForm = () => {
    setFormData({ name: '', email: '' });
  };
  const handleSubmit = (event) => {
    event.preventDefault();
    // フォームの送信処理
  };
  return (
    <form onSubmit={handleSubmit}>
      <label>
        Name:
        <input
          type="text"
          value={formData.name}
          onChange={(event) =>
            setFormData({ ...formData, name: event.target.value })
          }
        />
      </label>
      <label>
        Email:
        <input
          type="email"
          value={formData.email}
          onChange={(event) =>
            setFormData({ ...formData, email: event.target.value })
          }
        />
      </label>
      <button type="submit">Submit</button>
      <button type="button" onClick={resetForm}>Reset</button>
    </form>
  );
}

上記の例では、resetForm関数がフォームの状態を初期化しています。onClickイベントでこの関数を呼び出すことで、フォームの値がリセットされます。

制御されたコンポーネントのrefを使用する方法:

import React, { useRef } from 'react';
function MyForm() {
  const nameInputRef = useRef(null);
  const emailInputRef = useRef(null);
  const resetForm = () => {
    nameInputRef.current.value = '';
    emailInputRef.current.value = '';
  };
  const handleSubmit = (event) => {
    event.preventDefault();
    // フォームの送信処理
  };
  return (
    <form onSubmit={handleSubmit}>
      <label>
        Name:
        <input type="text" ref={nameInputRef} />
      </label>
      <label>
        Email:
        <input type="email" ref={emailInputRef} />
      </label>
      <button type="submit">Submit</button>
      <button type="button" onClick={resetForm}>Reset</button>
    </form>
  );
}

上記の例では、useRefフックを使用してフォームの各入力フィールドにrefを割り当てています。resetForm関数では、refを使用して入力フィールドの値を直接リセットしています。

これらの方法を使用することで、React.jsで制御されたフォームをリセットすることができます。適切な方法を選択して、自身のプロジェクトに組み込んでください。