Reactでフォームラベルの一意のIDを生成する方法は？

labelsを含むフォーム要素があり、s labelをhtmlFor属性を含む要素にリンクするための一意のIDが必要です。このようなもの：

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年8月17日を追加。代わりに、カスタムNEWIDのは、あなたが使用できる機能ユニークIDを lodashから。

2016年1月28日更新。でIDを生成することをお勧めしcomponentWillMountます。

IDは、ではなく、componentWillMount（2018の更新）内に配置する必要がconstructorありrenderます。これを入れると、render不必要に新しいIDが再生成されます。

アンダースコアまたはロダッシュを使用している場合、uniqueId関数があるため、結果のコードは次のようになります。

constructor(props) {
    super(props);
    this.id = _.uniqueId("prefix-");
}

render() { 
  const id = this.id;
  return (
    <div>
        <input id={id} type="checkbox" />
        <label htmlFor={id}>label</label>
    </div>
  );
}

2019フックの更新：

import React, { useState } from 'react';
import _uniqueId from 'lodash/uniqueId';

const MyComponent = (props) => {
  // id will be set once when the component initially renders, but never again
  // (unless you assigned and called the second argument of the tuple)
  const [id] = useState(_uniqueId('prefix-'));
  return (
    <div>
      <input id={id} type="checkbox" />
      <label htmlFor={id}>label</label>
    </div>
  );
}

2019-04-04のフォローアップでは、これはReact Hooks 'で達成できるようですuseState：

import React, { useState } from 'react'
import uniqueId from 'lodash/utility/uniqueId'

const Field = props => {
  const [ id ] = useState(uniqueId('myprefix-'))

  return (
    <div>
      <label htmlFor={id}>{props.label}</label>
      <input id={id} type="text"/>
    </div>
  )      
}

export default Field

私が理解しているように、更新を可能にする配列の構造化解除の2番目の配列項目を無視するidと、コンポーネントの存続期間中は再度更新されない値が得られます。

値は、idあろうmyprefix-<n>場所<n>から返さインクリメンタル整数値ですuniqueId。それがあなたにとって十分にユニークではない場合は、あなた自身のようにすることを検討してください

function gen4() {
  return Math.random().toString(16).slice(-4)
}

function simpleUniqueId(prefix) {
  return (prefix || '').concat([
    gen4(),
    gen4(),
    gen4(),
    gen4(),
    gen4(),
    gen4(),
    gen4(),
    gen4()
  ].join(''))
}

または、こちらで公開したライブラリhttps://github.com/rpearce/simple-uniqueidを確認してください。他にも数百または数千の一意のIDがありますがuniqueId、プリフィックスが付いたlodash で十分です。

アップデート2019-07-10

フック初期状態をフックするように指示してくれた@Huong Hkに感謝します。その合計は、関数を渡すことができるということuseStateで、初期マウントでのみ実行されます。

// before
const [ id ] = useState(uniqueId('myprefix-'))

// after
const [ id ] = useState(() => uniqueId('myprefix-'))

これにnode-uuidなどのライブラリを使用すると、一意のIDを確実に取得できます。

次を使用してインストール：

npm install node-uuid --save

次に、reactコンポーネントに以下を追加します。

import {default as UUID} from "node-uuid";
import {default as React} from "react";

export default class MyComponent extends React.Component {   
  componentWillMount() {
    this.id = UUID.v4();
  }, 
  render() {
    return (
      <div>
        <label htmlFor={this.id}>My label</label>
        <input id={this.id} type="text"/>
      </div>
    );
  }   
}

うまくいけば、チェックサムの問題が最初にここに私を導いたものなので、これは普遍的/同形のソリューションを探している人にとって役立つでしょう。

上記のように、新しいIDを順次作成するための簡単なユーティリティを作成しました。IDはサーバーで増加し続け、クライアントで0からやり直すので、SSRが開始するたびに増分をリセットすることにしました。

// utility to generate ids
let current = 0

export default function generateId (prefix) {
  return `${prefix || 'id'}-${current++}`
}

export function resetIdCounter () { current = 0 }

次に、ルートコンポーネントのコンストラクターまたはcomponentWillMountで、resetを呼び出します。これは基本的に、各サーバーレンダリングでサーバーのJSスコープをリセットします。クライアントでは、効果はありません（すべきではありません）。

labelおよびの通常の使用方法では、次のinputように入力をラベルにラップする方が簡単です。

import React from 'react'

const Field = props => (
  <label>
    <span>{props.label}</span>
    <input type="text"/>
  </label>
)      

また、チェックボックス/ラジオボタンでルート要素にパディングを適用し、入力のクリックのフィードバックを取得することもできます。

私はこのような簡単な解決策を見つけました：

class ToggleSwitch extends Component {
  static id;

  constructor(props) {
    super(props);

    if (typeof ToggleSwitch.id === 'undefined') {
      ToggleSwitch.id = 0;
    } else {
      ToggleSwitch.id += 1;
    }
    this.id = ToggleSwitch.id;
  }

  render() {
    return (
        <input id={`prefix-${this.id}`} />
    );
  }
}

typescriptの他の簡単な方法：

static componentsCounter = 0;

componentDidMount() {
  this.setState({ id: 'input-' + Input.componentsCounter++ });
}

uniqueIdジェネレーターモジュール（Typescript）を作成します。

const uniqueId = ((): ((prefix: string) => string) => {
  let counter = 0;
  return (prefix: string): string => `${prefix}${++counter}`;
})();

export default uniqueId;

そして、トップモジュールを使用して一意のIDを生成します。

import React, { FC, ReactElement } from 'react'
import uniqueId from '../../modules/uniqueId';

const Component: FC = (): ReactElement => {
  const [inputId] = useState(uniqueId('input-'));
  return (
    <label htmlFor={inputId}>
      <span>text</span>
      <input id={inputId} type="text" />
    </label>
  );
};     

必要がない場合はIDをまったく使用せず、代わりに次のように入力をラベルで囲みます。

<label>
   My Label
   <input type="text"/>
</label>

そうすれば、一意のIDを気にする必要はありません。