[解決済み] 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
.
関連
-
[解決済み】React.jsの配列の子要素のユニークキーを理解する
-
[解決済み】Warning.Itが表示されるのはなぜですか?Functions are not valid as a React child?
-
[解決済み] マテリアルUIセレクトフィールドのマルチセレクト
-
[解決済み] configuration.module に未知のプロパティ 'loaders' があります。
-
[解決済み] ReactjsのEsLintの "react / jsx-props-no-spreading "エラーを無効化する。
-
[解決済み] validateDOMNesting警告React
-
[解決済み] Reactコンポーネントに条件付きで属性を追加するにはどうすればよいですか?
-
[解決済み] クエリ文字列からパラメータ値を取得する方法は?
-
[解決済み] Reactでネストした状態のプロパティを更新する方法
-
[解決済み] React - 制御不能な入力を変更する
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み】React Propsが定義されていません。
-
[解決済み] FontAwesomeの無料パッケージに含まれているアイコンのオブジェクト名はどこにあるのですか?
-
[解決済み] configuration.module に未知のプロパティ 'loaders' があります。
-
[解決済み] Webpack のコンパイルに失敗した
-
[解決済み] React - _this2.SetStateは関数ではありません。
-
[解決済み] Uncaught (in promise) Error: リクエストに失敗、ステータスコード404
-
[解決済み] は、gatsby-imageで動作する良いreactのカルーセルコンポーネントはありますか?[って聞かれます。]
-
[解決済み] nextjsで異なる.envファイルを使用するには?
-
[解決済み] GUID / UUIDの作成方法
-
[解決済み] JavaScriptでランダムな文字列/文字を生成する