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

2024年6月18日

※このサイトの記事内では広告を掲載している場合があります。

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

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

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

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

リンク

コンテンツ

1 ソースコード
- 1.1 inputタグでのテキストの取得
- 1.2 formタグでのテキストの取得
2 まとめ

ソースコード

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>
  </>
  );
}

import React, { useState } from 'react';

root.render(

);

function MyInput() {

const [text, setText] = useState("");

const readText = () => {

alert(text)

}

return (

入力：

<input

type="text"

value={text}

onChange={(e) => setText(e.target.value)}

<p />

</>

);

}

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>
  </>
  );
}