Reactのrefの個人的に意外な指定方法

ref属性って関数渡せるんですね。こんな風に。

export default class IndexPage extends React.Component<IndexPageProps, IndexPageState> {

    // ref保持しとくフィールド
    private x: HTMLInputElement;

    ... 省略 ...

    private handleSubmit(e: React.SyntheticEvent) {
        e.preventDefault();
        var xValue = this.x.value; // 使う
        ... 省略 ...
    }

    render() {
        return (
            <form onSubmit={this.handleSubmit.bind(this)}>
                <input type='text' ref={node => this.x = node} /> // 格納
                ... 省略 ...
            </form>
        );
    }
}

これでTypeScriptでrefを参照するときにthis.refs['x']とかしないといけなかったのが楽になりそう。