¿Cómo generar ID únicos para etiquetas de formulario en React?

Tengo elementos de formulario con labelsy quiero tener ID únicos para vincular labels a elementos con htmlForatributo. Algo como esto:

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

Solía ​​generar ID basados ​​en this._rootNodeIDpero no está disponible desde React 0.13. ¿Cuál es la mejor y / o más simple forma de hacerlo ahora?

Esta solución funciona bien para mí.

utils/newid.js:

let lastId = 0;

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

Y puedo usarlo así:

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

Pero no funcionará en aplicaciones isomorfas.

Añadido 17.08.2015 . En lugar de la función newId personalizada, puede usar uniqueId de lodash.

Actualizado 28.01.2016 . Es mejor generar ID en componentWillMount.

La identificación debe colocarse dentro de componentWillMount (actualización para 2018) constructor, no render. Poniéndolo enrender volverá a generar nuevos identificadores innecesariamente.

Si está usando subrayado o lodash, hay una uniqueIdfunción, por lo que su código resultante debería ser algo como:

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

Actualización de ganchos 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>
  );
}

A partir del 04/04/2019, esto parece lograrse con los ganchos de reacción 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

Según tengo entendido, ignora el segundo elemento de la matriz en la desestructuración de la matriz que le permitiría actualizar id, y ahora tiene un valor que no se actualizará nuevamente durante la vida útil del componente.

El valor de idserá myprefix-<n>donde <n>es un valor entero incremental devuelto desde uniqueId. Si eso no es lo suficientemente exclusivo para ti, considera hacer tu propio me gusta

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

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

o echa un vistazo a la biblioteca que publiqué aquí: https://github.com/rpearce/simple-uniqueid . También hay cientos o miles de otras cosas de identificación únicas, pero lodash uniqueIdcon un prefijo debería ser suficiente para hacer el trabajo.

Actualizar 2019-07-10

Gracias a @Huong Hk por señalarme al estado inicial lento de los ganchos , cuya suma es que puedes pasarle una función useStateque solo se ejecutará en el montaje inicial.

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

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

Podría usar una biblioteca como node-uuid para asegurarse de obtener identificadores únicos.

Instalar usando:

npm install node-uuid --save

Luego, en su componente de reacción, agregue lo siguiente:

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

Espero que esto sea útil para cualquiera que esté buscando una solución universal / isomórfica, ya que el problema de la suma de verificación es lo que me llevó aquí en primer lugar.

Como se dijo anteriormente, he creado una utilidad simple para crear secuencialmente una nueva identificación. Como las ID siguen aumentando en el servidor y comienzan de nuevo desde 0 en el cliente, decidí restablecer el incremento cada vez que se inicia el SSR.

// utility to generate ids
let current = 0

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

export function resetIdCounter () { current = 0 }

Y luego, en el constructor del componente raíz o componentWillMount, llame al reinicio. Esto esencialmente restablece el alcance de JS para el servidor en cada render del servidor. En el cliente no tiene (y no debería) tener ningún efecto.

Para los usos habituales de labely input, es más fácil ajustar la entrada en una etiqueta como esta:

import React from 'react'

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

También hace posible que en las casillas de verificación / botones de radio se aplique el relleno al elemento raíz y aún así obtener comentarios del clic en la entrada.

Encontré una solución fácil como esta:

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

Otra forma simple con mecanografiado:

static componentsCounter = 0;

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

Creo un módulo generador de ID único (Typecript):

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

export default uniqueId;

Y use el módulo superior para generar identificadores únicos:

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

No use ID en absoluto si no lo necesita, en su lugar, ajuste la entrada en una etiqueta como esta:

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

Entonces no tendrá que preocuparse por identificaciones únicas.