1. ホーム
  2. reactjs

[解決済み] ReactでフォームラベルのユニークなIDを生成する方法は?

2022-04-24 17:06:59

質問

form 要素に label をリンクするためのユニークなIDを持ちたいのです。 label を持つ要素に htmlFor 属性で指定します。このようなものです。

React.createClass({
    render() {
        const id = ???;
        return (
            <label htmlFor={id}>My label</label>
            <input id={id} type="text"/>
        );
    }
});

を元にIDを生成していたのですが this._rootNodeID が、React 0.13から使えなくなった。今、それを行うための最良かつ/または最も単純な方法は何ですか?

どのように解決するのですか?

この解決策は、私にとってうまく機能します。

utils/newid.js :

let lastId = 0;

export default function(prefix='id') {
    lastId++;
    return `${prefix}${lastId}`;
}

そして、こんな風に使うことができるんです。

import newId from '../utils/newid';

React.createClass({
    componentWillMount() {
        this.id = newId();
    },
    render() {
        return (
            <label htmlFor={this.id}>My label</label>
            <input id={this.id} type="text"/>
        );
    }
});

しかし、同型のアプリではうまくいきません。

2015.08.17追記 . カスタム newId 関数の代わりに、以下のものを使用できます。 ユニークアイディー をLodashから取得します。

2016.01.28更新 . でIDを生成するのがよいでしょう。 componentWillMount .