[解決済み】ReactでTypescriptを使ってrefを使用する方法

質問

私は、ReactでTypescriptを使っています。静的型付けと、refsによって参照されるreactノードに関するインテリセンスを得るために、refsをどのように使用すればよいか理解できずに困っています。私のコードは以下の通りです。

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>
    );
}}

解決方法は？

React 16.3+を使用している場合は 推奨される方法 を使用して参照先を作成することができます。 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の回答 または PR createRef() が追加されました。

以前のバージョンのReact（<16.3）を使用している場合や、refの設定と解除をより細かく制御する必要がある場合は、以下のように使用します。 "コールバック・レフ" .

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 は ref コールバックを DOM 要素で呼び出し、それを null をアンマウントするときに使用します。ですから、例えば、単純に次のようにアクセスすることができます。 this.stepInput .

を定義することで ref コールバックは、インライン関数ではなく、クラスのバインドメソッドとして（たとえば 前バージョン を使用すると、コールバックを回避することができます。 の間に2回呼び出されます。 の更新を行います。

こちら 以前は というAPIがあります。 ref 属性は文字列であった ( Akshar Patelの回答 ) が 一部 問題点 文字列参照は強く推奨されず、最終的には削除される予定です。

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