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」でテキストフィールドの場合は入力されている値を取得できます。

コメントを残す