【React入門】formやinputタグのテキストを取得する方法を解説！

今回は、Reactでinputやformで入力されたテキストの情報を取得する方法を解説します。

Reactで入力値を取得するには、コンポーネントの状態（state）を使用します。

考え方は、要素が変更されたタイミングでstateの更新を行い、必要なタイミングで対応するstateを取得するといった流れになります。

本記事の内容は書籍「これからはじめるReact実践入門」を参考にしています。

ソースコード

inputタグでのテキストの取得

まずはinputタグに入力されたテキストの情報を取得する方法の解説です。

ソースコードの概要は冒頭の説明通りです。

19行目の「onChange」イベントで変更されるタイミングでtextの変数に対応するstateを随時更新しています。

そして、更新された「text」変数をボタンクリック時に取得するといった流れになっています。

import React, { useState } from 'react';

root.render(
  <MyInput />
);

function MyInput() {
  const [text, setText] = useState("");
  const readText = () => {
    alert(text)
  }

  return (
    <>
      入力：
      <input 
        type="text" 
        value={text} 
        onChange={(e) => setText(e.target.value)} 
      />
    <p />
    <button onClick={readText}>クリック！</button>
  </>
  );
}

formタグでのテキストの取得

次にinputタグに入力されたテキストの情報を取得する方法の解説です。

コードの書き方はほぼすべて同じです。

import React, { useState } from 'react';

root.render(
  <MyForm />
);

function MyForm() {
  const [text, setText] = useState("");
  const readText = () => {
    alert(text)
  }

  return (
  <>
    <form>
      <label>
        入力：
        <input type="text" size="20" onChange={(e) => setText(e.target.value)}/>
      </label>
    </form>
    <p />
    <button onClick={readText}>クリック！</button>
  </>
  );
}

まとめ

今回は、Reactでinputやformで入力されたテキストの情報を取得する方法を解説しました。

Reactの学習を始めたばかりだと、データの取得方法も少し特徴的で悩みますよね。

本記事が少しでも参考になれば幸いです。

本記事の内容は書籍「これからはじめるReact実践入門」を参考にしています。