typescript+Reactでrefを利用する方法

タグ: ,

typescript+React環境でrefを使う方法です。

 

サンプル

import * as React from 'react';
import './App.css';
export class App extends React.Component<any> {
  private inputRef = React.createRef<HTMLInputElement>()

  public handleClick = () => {
    if (this.inputRef.current) {
      this.inputRef.current.focus();
    }
    console.dir(this.inputRef)
  }

  public render() {
    return (
      <div className="App">
        <header className="App-header">
          <h1 className="App-title">Welcome to React</h1>
          <input
            type="text"
            ref={this.inputRef}
            onClick={this.handleClick}
          />
        </header>
      </div>
    );
  }
}

 

解説

private inputRef = React.createRef<HTMLInputElement>()

宣言します。createRef<ここにエレメント>()

divならHTMLDivElementです。

取得したいdomのにref={this.inputRef}を追加するだけ

 

これで、this.inputRef.currentで要素にアクセス出来ます。

domがない場合はnullが返るので初期レンダリングの時のためにnullチェックが必要だったりします。

お仕事の相談

フリーランスエンジニアをお探しでしたらこちらよりご連絡ください お仕事の相談