かずきのBlog@hatena

日本マイクロソフトに勤めています。このブログは個人ブログなので、ここに書いている内容は個人的な意見で会社の公式見解ではない点にご注意ください。好きなものは XAML と C# 。苦手なものは型の無い言語です。

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']とかしないといけなかったのが楽になりそう。