【React】入力値の取得

入力値の取得

Reactで入力値を取得するためには、通常はコンポーネントの状態（state）を使用します。入力フィールド（input要素など）にユーザーが入力した値は、コンポーネントの状態に格納され、必要に応じて取得や更新が行われます。

使用方法

以下は、Reactで入力値を取得する基本的な方法の例です。

import React, { useState } from 'react';

function MyForm() {
  // 入力値を格納する状態を初期化する
  const [inputValue, setInputValue] = useState('');

  // 入力値が変更されたときに呼ばれるハンドラー関数
  const handleInputChange = (event) => {
    // 入力値を更新する
    setInputValue(event.target.value);
  };

  // フォームが送信されたときに呼ばれるハンドラー関数
  const handleSubmit = (event) => {
    // フォームのデフォルトの動作を防止する
    event.preventDefault();
    // 入力値を使用して何かを行う（例：サーバーにデータを送信する）
    console.log('入力された値:', inputValue);
  };

  return (
    <form onSubmit={handleSubmit}>
      {/* 入力フィールド */}
      <input
        type="text"
        value={inputValue} // 状態に格納された値を表示する
        onChange={handleInputChange} // 入力値が変更されたときにハンドラー関数を呼び出す
      />
      {/* 送信ボタン */}
      <button type="submit">送信</button>
    </form>
  );
}

export default MyForm;

この例では、useStateフックを使用してinputValueという状態を定義し、その初期値を空文字列で設定しています。handleInputChange関数は、入力値が変更されるたびに呼び出され、新しい入力値を状態に設定します。handleSubmit関数はフォームが送信されると呼び出され、現在の入力値をコンソールに出力します。