ボタン押下時にテキストの値を取得する方法【React】

■はじめに

ログインする際など、ボタンを押下した時に、テキストフィールドの値を取得したい場合などは多々あります。

ここでは、その方法に関して、一例を記載します。

■手順

まずは、App.jsのソースコードの全文を載せます。

以下をコピペすると動きは確認できます。

import React from 'react';

class App extends React.Component{
  render()
  {
    var textData = ""
    function changeText(e) {
      textData = e.target.value
    }
    function btnClick() {
      alert(textData);
    }
    return (
      <div>
        <h1>Hello World</h1>
        <input type="text" onChange={changeText}/><br/>
        <button onClick={btnClick}>ボタン</button>
      </div>
    );
  }
}

export default App;

細かく解説すると、以下のテキストフィールドの定義で「onChange」の定義を記載してます。

この「onChange」は値が書き換わった時（テキストフィールドに値を入力した時）に呼び出される関数です。

ここでは「changeText」関数を呼び出しています。

<input type="text" onChange={changeText}/>

以下の関数でフィールド変数の「textData」にテキストの値を格納しています。

第一引数の「e」は「event」の略で、自動でchangeTextの呼び出し元のオブジェクトが格納されます。

var textData = ""
function changeText(e) {
  textData = e.target.value
}

以下で、保存していたテキストフィールドの値をalertで表示させています。

function btnClick() {
  alert(textData);
}