ID指定でオブジェクトを取得する方法【React】

■はじめに

以前、「ボタン押下時にテキストの値を取得する方法【React】」でテキストの変更時処理で変数に値を保持して操作していました。

ここでは、オブジェクトを取得することで、必要な時に最新の値が取得できるようになります。

どちらが良いかは、好みな気もしますが、個人的には、こちらの方法の方がしっくりきます。

■手順

まずは、App.jsのソースコードの全量は以下

import React from 'react';

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

export default App;

以下のようにすることで、IDを指定してオブジェクトを取得できます。

document.getElementById('[id名]')

取得したオブジェクトの「.value」でテキストフィールドの場合は入力されている値を取得できます。