[フロントエンド] React.jsでDOM要素にアクセスする（refの利用） - YoheiM .NET
こんにちは、@yoheiMuneです。 Reactなどの仮想DOMを扱うライブラリでは、直接HTML要素にアクセスする機会は少ないですが、でも時々はアクセスしたい場合があります。React流にどのようにDOMにアクセスするのか、ブログに書きたいと思います。 目次 対象のReactバージョン このブログでは、React.jsのv16.3.0をベースに記載しています。フロントエンドは進化が早いので、適宜読み替えてください。 何がしたいのか Webアプリを作っていると、DOM要素にアクセスして値を取得したいという場合があります。例えば以下のようなinputがあるとします。 <input type="text" name="name"/> このDOMにアクセスしたい場合、（Reactではない普通のJSでは）以下のようにアクセスします。 let input = document.querySelec
![[フロントエンド] React.jsでDOM要素にアクセスする（refの利用） - YoheiM .NET](https://cdn-ak-scissors.b.st-hatena.com/image/square/777b1ea633e3070184c46ecb5fb900b03fe32c61/height=288;version=1;width=512/https%3A%2F%2Fwww.yoheim.net%2Fimage%2F564.jpg)
[フロントエンド] React.jsで、クラスのメソッドのthisを一括でバインドする - YoheiM .NET
こんにちは、@yoheiMuneです。 今日はReactで、onClickなどで呼び出す関数のthisを、一括でクラスにバインドする方法を、ブログに書きたいと思います。 目次 何が問題か ReactコンポーネントをES6のクラスで作成すると、onClickで呼び出すメソッドのthisがundefinedになってしまいます。 import React, { Component } from 'react' class MyComponent extends Component { onClick() { console.log(this) // 「undefined」になる. } render() { return ( <div onClick={this.onClick}>Click Me!!</div> ); } } 対処法としては以下のようにthisをバインドすれば良いのですが、毎回や
![[フロントエンド] React.jsで、クラスのメソッドのthisを一括でバインドする - YoheiM .NET](https://cdn-ak-scissors.b.st-hatena.com/image/square/dd545829ddec747aaede2005b4cbb39fb9ae9f08/height=288;version=1;width=512/https%3A%2F%2Fwww.yoheim.net%2Fimage%2F563.jpg)
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
