ReactJS: useStateフックとonChangeイベントで入力テキストの値を取得

2024-06-20

ReactJSでクリック時に入力テキストの値を取得する方法

onChangeイベントを使用する

コード例:

import React, { useState } from 'react';

function MyComponent() {
  const [inputText, setInputText] = useState('');

  const handleChange = (event) => {
    setInputText(event.target.value);
  };

  const handleClick = () => {
    console.log(`入力されたテキスト: ${inputText}`);
  };

  return (
    <div>
      <input type="text" value={inputText} onChange={handleChange} />
      <button onClick={handleClick}>クリック</button>
    </div>
  );
}

export default MyComponent;

説明:

useStateフックを使用して、inputTextというステート変数を定義します。この変数は、入力テキストの値を保持します。
onChangeイベントハンドラーをinput要素に設定します。このハンドラーは、入力テキストが変更されるたびに呼び出されます。
handleChangeハンドラー内で、event.target.valueを使用して、現在の入力テキストの値を取得します。
setInputTextを使用して、ステート変数を更新し、新しい入力テキストの値を設定します。
handleClick関数は、ボタンをクリックしたときに呼び出されます。この関数内で、console.logを使用して、入力されたテキストの値を出力します。

useStateフックとrefを使用する

import React, { useState, useRef } from 'react';

function MyComponent() {
  const inputRef = useRef(null);
  const [inputText, setInputText] = useState('');

  const handleClick = () => {
    const text = inputRef.current.value;
    setInputText(text);
    console.log(`入力されたテキスト: ${text}`);
  };

  return (
    <div>
      <input type="text" ref={inputRef} />
      <button onClick={handleClick}>クリック</button>
    </div>
  );
}

export default MyComponent;

console.logを使用して、入力されたテキストの値を出力します。

どちらの方法が適しているか:

onChangeイベントを使用する方法は、よりシンプルで分かりやすいです。
useStateフックとrefを使用する方法は、より柔軟性があり、入力テキストフィールドに対してより多くの制御を行うことができます。

その他の方法:

onInputイベントを使用する
フォームサブミッションイベントを使用する

ReactJSでクリック時に入力テキストの値を取得する - サンプルコード

import React, { useState } from 'react';

function MyComponent() {
  const [inputText, setInputText] = useState('');

  const handleChange = (event) => {
    setInputText(event.target.value);
  };

  const handleClick = () => {
    alert(`入力されたテキスト: ${inputText}`);
  };

  return (
    <div>
      <input type="text" value={inputText} onChange={handleChange} />
      <button onClick={handleClick}>クリック</button>
    </div>
  );
}

export default MyComponent;

このコードの説明:

handleClick ハンドラー内で、alert を使用して、入力されたテキストの値をユーザーに表示します。

このサンプルコードをどのように実行できますか？

このコードを .js または .jsx ファイルに保存します。
Node.js をインストールして、プロジェクトを初期化します。
react と react-dom パッケージをインストールします。
保存したコードファイルをインポートし、コンポーネントをレンダリングするコードを追加します。
開発サーバーを起動し、ブラウザでアプリケーションを開きます。

alert を使用して入力テキストの値を表示する代わりに、コンポーネント内の他の場所で値を使用できます。
入力テキストフィールドのラベルやプレースホルダーテキストを変更できます。
ボタンのラベルやスタイルを変更できます。
useState フックを使用して、入力テキストフィールド以外のステートを管理できます。

ReactJSでクリック時に入力テキストの値を取得する方法 - その他の方法

onInputイベントは、onChangeイベントと似ていますが、ユーザーが入力中にトリガーされる点が異なります。これは、入力テキストがリアルタイムで更新される必要がある場合に役立ちます。

import React, { useState } from 'react';

function MyComponent() {
  const [inputText, setInputText] = useState('');

  const handleInput = (event) => {
    setInputText(event.target.value);
  };

  const handleClick = () => {
    alert(`入力されたテキスト: ${inputText}`);
  };

  return (
    <div>
      <input type="text" onInput={handleInput} />
      <button onClick={handleClick}>クリック</button>
    </div>
  );
}

export default MyComponent;

利点:

ユーザーが入力中にリアルタイムでテキストを更新できます。

onChangeイベントよりもパフォーマンスが若干劣る可能性があります。

フォームサブミッションイベントは、ユーザーがフォームを送信したときにトリガーされます。これは、入力テキストを含むフォーム全体を処理する必要がある場合に役立ちます。

import React, { useState } from 'react';

function MyComponent() {
  const [inputText, setInputText] = useState('');

  const handleSubmit = (event) => {
    event.preventDefault();
    alert(`入力されたテキスト: ${inputText}`);
  };

  return (
    <form onSubmit={handleSubmit}>
      <input type="text" value={inputText} onChange={(event) => setInputText(event.target.value)} />
      <button type="submit">送信</button>
    </form>
  );
}

export default MyComponent;

入力テキストを含むフォーム全体を処理できます。

ユーザーがボタンをクリックする必要があり、クリック以外の操作ではトリガーされません。

カスタムフックを使用して、独自のロジックをカプセル化し、コンポーネント間で再利用できます。これは、より複雑なユースケースの場合に役立ちます。

import React, { useState, useEffect } from 'react';

function useInputValue(initialValue) {
  const [value, setValue] = useState(initialValue);

  const handleChange = (event) => {
    setValue(event.target.value);
  };

  return { value, handleChange };
}

function MyComponent() {
  const { value, handleChange } = useInputValue('');

  const handleClick = () => {
    alert(`入力されたテキスト: ${value}`);
  };

  return (
    <div>
      <input type="text" value={value} onChange={handleChange} />
      <button onClick={handleClick}>クリック</button>
    </div>
  );
}

export default MyComponent;

独自のロジックをカプセル化し、コンポーネント間で再利用できます。
より複雑なユースケースに対応できます。

コードが少し複雑になる可能性があります。

シンプルで使いやすい方法は、onChangeイベントを使用する方法です。
ユーザーが入力中にリアルタイムでテキストを更新する必要がある場合は、onInputイベントを使用します。
入力テキストを含むフォーム全体を処理する必要がある場合は、フォームサブミッションイベントを使用します。
より複雑なユースケースの場合は、カスタムフックを使用します。

その他の考慮事項:

パフォーマンスが重要の場合は、onInputイベントよりもonChangeイベントを使用することを検討してください。
ユーザーエクスペリエンスが重要の場合は、ユーザーがどのように入力するかを考慮してください。たとえば、ユーザーが入力中にテキストを頻繁に変更する場合は、onInputイベントを使用する方が良い場合があります。

reactjs