Comment générer des identifiants uniques pour les étiquettes de formulaire dans React?

J'ai des éléments de formulaire avec labels et je souhaite avoir des identifiants uniques pour lier les labels aux éléments avec htmlForattribut. Quelque chose comme ça:

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

J'avais l'habitude de générer des identifiants basés sur this._rootNodeIDmais ce n'est pas disponible depuis React 0.13. Quelle est la meilleure et / ou la plus simple façon de le faire maintenant?

Cette solution fonctionne très bien pour moi.

utils/newid.js:

let lastId = 0;

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

Et je peux l'utiliser comme ceci:

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"/>
        );
    }
});

Mais cela ne fonctionnera pas dans les applications isomorphes.

Ajouté le 17.08.2015 . Au lieu de la fonction newId personnalisée, vous pouvez utiliser uniqueId de lodash.

Mis à jour le 28.01.2016 . Il est préférable de générer une pièce d'identité componentWillMount.

L'identifiant doit être placé à l'intérieur de componentWillMount (mise à jour pour 2018) constructor, pas render. Le mettre en rendergénèrera inutilement de nouveaux identifiants.

Si vous utilisez un trait de soulignement ou un lodash, il existe une uniqueIdfonction, donc votre code résultant devrait être quelque chose comme:

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>
  );
}

Mise à jour des Hooks 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>
  );
}

Suite à partir du 04/04/2019, cela semble pouvoir être accompli avec les 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

Si je comprends bien, vous ignorez le deuxième élément du tableau dans la déstructuration du tableau qui vous permettrait de mettre à jour id, et vous avez maintenant une valeur qui ne sera pas mise à jour à nouveau pendant la durée de vie du composant.

La valeur de idsera myprefix-<n>où <n>est une valeur entière incrémentielle renvoyée uniqueId. Si ce n'est pas assez unique pour vous, pensez à créer le vôtre

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

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

ou consultez la bibliothèque que j'ai publiée avec ceci ici: https://github.com/rpearce/simple-uniqueid . Il existe également des centaines ou des milliers d'autres éléments d'identification uniques, mais les lodash uniqueIdavec un préfixe devraient suffire pour faire le travail.

Mise à jour 10/07/2019

Merci à @Huong Hk de m'avoir pointé vers l'état initial paresseux des hooks , dont la somme est que vous pouvez passer une fonction à useStatequi ne sera exécutée que sur le montage initial.

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

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

Vous pouvez utiliser une bibliothèque telle que node-uuid pour cela afin de vous assurer d'obtenir des identifiants uniques.

Installez en utilisant:

npm install node-uuid --save

Ensuite, dans votre composant de réaction, ajoutez ce qui suit:

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>
    );
  }   
}

J'espère que cela sera utile à tous ceux qui recherchent une solution universelle / isomorphe, car le problème de la somme de contrôle est ce qui m'a amené ici en premier lieu.

Comme indiqué ci-dessus, j'ai créé un utilitaire simple pour créer séquentiellement un nouvel identifiant. Étant donné que les ID continuent d'augmenter sur le serveur et recommencent à partir de 0 dans le client, j'ai décidé de réinitialiser l'incrément à chaque démarrage du SSR.

// utility to generate ids
let current = 0

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

export function resetIdCounter () { current = 0 }

Et puis dans le constructeur ou componentWillMount du composant racine, appelez la réinitialisation. Cela réinitialise essentiellement la portée JS du serveur dans chaque rendu de serveur. Chez le client, cela n'a pas (et ne devrait pas) avoir d'effet.

Pour les utilisations habituelles de labelet input, il est simplement plus facile d'encapsuler l'entrée dans une étiquette comme celle-ci:

import React from 'react'

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

Cela permet également dans les cases à cocher / boutons radio d'appliquer un remplissage à l'élément racine et d'obtenir toujours des commentaires sur le clic sur l'entrée.

J'ai trouvé une solution simple comme celle-ci:

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}`} />
    );
  }
}

Autre moyen simple avec dactylographié:

static componentsCounter = 0;

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

Je crée un module générateur uniqueId (Typescript):

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

export default uniqueId;

Et utilisez le module supérieur pour générer des identifiants uniques:

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>
  );
};     

N'utilisez pas du tout d'ID si vous n'en avez pas besoin, enveloppez plutôt l'entrée dans une étiquette comme celle-ci:

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

Vous n'aurez alors plus à vous soucier des identifiants uniques.