React頻出のe.target.valueを理解する
こんにちは、PR広報の山下です。
弊社では、エンジニアだけでなく、広報の私のような非エンジニアにも様々な業務に対応するため技術力を求められてます。
弊社の必須技術のReactを身につけるために、学習している内容をメモとして残せればと思います。
e.target.valueが理解できていなかった話
Reactでフォームのstateを扱う上でよく使用する"e.target.value"が理解できていなかったので、今回はJavaScriptの理解も含めReactのフォームではどのように扱うのかを学んでいこうと思います。
e.target.value とは何か？
e.target.valueは、イベントハンドラー内で使用される式で、ユーザーがフォーム要素に入力したデータを取得できます。ここで、e(event)はイベントオブジェクトを表し、targetはイベントが発生した要素（例えば、inputやselect）、valueはその要素の現在の値を指します。
JavaScriptでの使用例
// HTML
<input type="text" id="textInput" />
// JavaScript
document.addEventListener('DOMContentLoaded', function() {
var textInput = document.getElementById('textInput');
textInput.addEventListener('input', function(e) {
console.log(e.target.value); // 入力値をコンソールに表示
});
});この例では、consoleにinput要素に何かを入力した際の値を取得し表示しています。
Reactで使用すると
Reactでは、e.target.valueを使って、ユーザー入力をコンポーネントのstateに結びつけることが一般的です。
function TextInput() {
const [inputValue, setInputValue] = useState("");
const handleChange = (e) => {
setInputValue(e.target.value); // 先に入力値をstateにセット
console.log(e.target.value); // その後、コンソールに表示
};
return <input type="text" value={inputValue} onChange={handleChange} />;
}ReactではUIも扱うため、inputで取得したものをstateにセットしてからconsoleに表示という形で行っていますが、基本的にはJavaScirptと動作は同じです。
さいごに
Web開発に触れていた頃は生のJavaScriptよりも直感的であったため、jQueryを用いることが多かったです。
しかし、JavaScriptの理解が深くないまま使用していたこともあり、e.target.valueのようなJavaScriptの基本的な概念に対する理解が浅いままになっていました。
前回も思いましたが、基礎も同時に学んでいきたいですね！
bluecodeで一緒に働きませんか？
bluecodeはsystemではなくlifestyleを開発する会社です。
エンジニアやプロジェクトマネージャーをフルタイムからスポットまで様々な働き方で採用を行っております。
釣り人には嬉しい『釣り補助』という制度もございます！
気になった方は、ぜひ一度HPをご覧ください！