☰

Typescript で React の refs を使用する方法 質問する

tag-icon • tag-icon reactjs typescript
Typescript で React の refs を使用する方法 質問する

私は React で Typescript を使用しています。ref によって参照される react ノードに関して静的型付けとインテリセンスを取得するために ref を使用する方法がわかりません。私のコードは次のとおりです。

import * as React from 'react';

interface AppState {
    count: number;
}

interface AppProps {
    steps: number;
}

interface AppRefs {
    stepInput: HTMLInputElement;
}

export default class TestApp extends React.Component<AppProps, AppState> {

constructor(props: AppProps) {
    super(props);
    this.state = {
        count: 0
    };
}

incrementCounter() {
    this.setState({count: this.state.count + 1});
}

render() {
    return (
        <div>
            <h1>Hello World</h1>
            <input type="text" ref="stepInput" />
            <button onClick={() => this.incrementCounter()}>Increment</button>
            Count : {this.state.count}
        </div>
    );
}}

ベストアンサー1

React 16.3以降を使用している場合は、推奨される方法refs を作成するには を使用しますReact.createRef()。

class TestApp extends React.Component<AppProps, AppState> {
    private stepInput: React.RefObject<HTMLInputElement>;
    constructor(props) {
        super(props);
        this.stepInput = React.createRef();
    }
    render() {
        return <input type="text" ref={this.stepInput} />;
    }
}

コンポーネントがマウントされると、ref属性のcurrentプロパティは参照先のコンポーネント/DOM 要素に割り当てられ、nullマウント解除されると に割り当てられます。そのため、たとえば を使用してアクセスできますthis.stepInput.current。

詳細についてはRefObject、@apieceofbart の回答または広報 createRef()が追加されました。

以前のバージョンのReact（<16.3）を使用している場合、またはrefsの設定と設定解除をより細かく制御する必要がある場合は、以下を使用できます。「コールバック参照」。

class TestApp extends React.Component<AppProps, AppState> {
    private stepInput: HTMLInputElement;
    constructor(props) {
        super(props);
        this.stepInput = null;
        this.setStepInputRef = element => {
            this.stepInput = element;
        };
    }
    render() {
        return <input type="text" ref={this.setStepInputRef} />
    }
}

コンポーネントがマウントされると、React はrefDOM 要素でコールバックを呼び出し、nullアンマウントされると でコールバックを呼び出します。そのため、たとえば、 を使用するだけでアクセスできますthis.stepInput。

refコールバックをインライン関数ではなくクラスのバインドされたメソッドとして定義することで（前のバージョンこの回答のコールバックを回避できます2回呼び出されるアップデート。

そこにはかつてはref属性が文字列であるAPI （アクシャル・パテルの回答）ですが、いくつかの 問題文字列参照は強く推奨されておらず、最終的には削除される予定です。

2018 年 5 月 22 日に編集し、React 16.3 で ref を実行する新しい方法を追加しました。新しい方法があることを指摘してくれた @apieceofbart に感謝します。

おすすめ記事