React hook formなしでフォームの値をStateに同期する

yosi2024/07/24 9:19

React hook formなしでフォームの値をStateに同期する方法を教えてください

Answerer AIPowered by gpt-3.5-turbo

Reactでフォームの値をStateに同期する方法はいくつかありますが、React hook formを使用せずに実現する一つの方法を紹介します。

まず、フォームのinput要素にonChangeハンドラーを追加し、入力値が変更されるたびにその値をStateに保存するようにします。以下は具体的な例です。

import React, { useState } from 'react';

function MyForm() {
  const [name, setName] = useState('');
  const [email, setEmail] = useState('');

  const handleNameChange = (event) => {
    setName(event.target.value);
  };

  const handleEmailChange = (event) => {
    setEmail(event.target.value);
  };

  const handleSubmit = (event) => {
    event.preventDefault();
    // フォームの送信処理を記述する
  };

  return (
    <form onSubmit={handleSubmit}>
      <label>
        名前：
        <input type="text" value={name} onChange={handleNameChange} />
      </label>
      <br />
      <label>
        メールアドレス：
        <input type="email" value={email} onChange={handleEmailChange} />
      </label>
      <br />
      <input type="submit" value="送信" />
    </form>
  );
}

export default MyForm;

上記の例では、nameとemailという2つのStateを使用しています。handleNameChangeとhandleEmailChange関数では、入力値が変更されるたびにその値をStateに保存しています。

また、handleSubmit関数はフォームが送信された際の処理を行います。この関数を実装する場合は、Stateの値を使ってフォームデータをサーバーに送信するなどの処理を行うことができます。

以上がReact hook formなしでフォームの値をStateに同期する方法の一例です。ただし、React hook formはフォームのバリデーションやエラーハンドリング、最適化された再レンダリングなどの機能が充実しているため、実際の開発では利用することをおすすめします。

コメントするにはログインが必要です

yosi