typescript+Reactでrefを利用する方法「class componentとfunctional component」

typescript+Reactでrefを利用する方法「class componentとfunctional component」

LINEで送る
Pocket

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

 

Classコンポーネント

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チェックが必要だったりします。

 

関数コンポーネント

export function App () {
  const myRef = React.useRef<HTMLDivElement >(null)
  return (
    <div ref={myRef}></div>
  )
}

Functional Component(関数コンポーネント)の場合は、useRefを使いましょう

LINEで送る
Pocket

フロントエンド開発でお困りのことはありませんか?

フロントエンドの開発支援を行っています。

・Reactの開発をお願いしたい

・コーディング作業を依頼したい

・javascriptライブラリを作って欲しい。

上記以外にも何かありましたらお気軽にお問い合わせください。

コメントを残す