Wie generiere ich eindeutige IDs für Formularbeschriftungen in React?

Ich habe Formularelemente mit labels und ich möchte eindeutige IDs haben, um labels mit Elementen mit htmlForAttribut zu verknüpfen . Etwas wie das:

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

Früher habe ich IDs basierend auf generiert, this._rootNodeIDaber seit React 0.13 ist es nicht mehr verfügbar. Was ist der beste und / oder einfachste Weg, dies jetzt zu tun?

Diese Lösung funktioniert gut für mich.

utils/newid.js::

let lastId = 0;

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

Und ich kann es so benutzen:

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

In isomorphen Apps funktioniert dies jedoch nicht.

Hinzugefügt am 17.08.2015 . Anstelle der benutzerdefinierten Funktion newId können Sie uniqueId von lodash verwenden.

Aktualisiert am 28.01.2016 . Es ist besser, eine ID in zu generieren componentWillMount.

Die ID sollte in componentWillMount (Update für 2018) platziert werden constructor, nicht render. Wenn Sie es rendereingeben, werden unnötigerweise neue IDs neu generiert.

Wenn Sie Unterstrich oder lodash verwenden, gibt es eine uniqueIdFunktion, sodass der resultierende Code ungefähr so aussehen sollte:

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 Hooks Update:

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

Nach dem Stand vom 04.04.2019 scheint dies mit den React Hooks erreicht werden zu können 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

Soweit ich weiß, ignorieren Sie das zweite Array-Element in der Array-Destrukturierung, mit dem Sie aktualisieren können id, und jetzt haben Sie einen Wert, der während der gesamten Lebensdauer der Komponente nicht erneut aktualisiert wird.

Der Wert von idwird dort sein, myprefix-<n>wo <n>ein inkrementeller ganzzahliger Wert zurückgegeben wird uniqueId. Wenn das für Sie nicht einzigartig genug ist, sollten Sie überlegen, wie Sie es sich wünschen

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

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

oder sehen Sie sich die Bibliothek an, die ich hier veröffentlicht habe: https://github.com/rpearce/simple-uniqueid . Es gibt auch Hunderte oder Tausende anderer eindeutiger ID-Dinge, aber Lodashs uniqueIdmit einem Präfix sollten ausreichen, um die Arbeit zu erledigen.

Update 2019-07-10

Vielen Dank an @Huong Hk, der mich auf den faulen Anfangszustand von Hooks hingewiesen hat Die Summe davon ist, dass Sie eine Funktion übergeben können useState, die nur auf dem anfänglichen Mount ausgeführt wird.

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

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

Sie können eine Bibliothek wie node-uuid verwenden , um sicherzustellen, dass Sie eindeutige IDs erhalten.

Installieren Sie mit:

npm install node-uuid --save

Fügen Sie dann in Ihrer Reaktionskomponente Folgendes hinzu:

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

Hoffentlich ist dies hilfreich für alle, die nach einer universellen / isomorphen Lösung suchen, da mich das Problem der Prüfsumme in erster Linie hierher geführt hat.

Wie oben erwähnt, habe ich ein einfaches Dienstprogramm erstellt, um nacheinander eine neue ID zu erstellen. Da die IDs auf dem Server weiter inkrementiert werden und im Client von 0 neu beginnen, habe ich beschlossen, das Inkrement bei jedem Start der SSR zurückzusetzen.

// utility to generate ids
let current = 0

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

export function resetIdCounter () { current = 0 }

Rufen Sie dann im Konstruktor oder in der Komponente WillMount der Stammkomponente den Reset auf. Dadurch wird der JS-Bereich für den Server in jedem Server-Rendering im Wesentlichen zurückgesetzt. Im Client hat (und sollte) es keine Wirkung.

Für die üblichen Verwendungen von labelund inputist es einfach einfacher, Eingaben in ein Etikett wie dieses zu verpacken:

import React from 'react'

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

Es ist auch möglich, in Kontrollkästchen / Radiobuttons das Root-Element aufzufüllen und dennoch Feedback zum Klicken auf die Eingabe zu erhalten.

Ich habe eine einfache Lösung wie diese gefunden:

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

Andere einfache Möglichkeit mit Typoskript:

static componentsCounter = 0;

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

Ich erstelle ein uniqueId-Generatormodul (Typescript):

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

export default uniqueId;

Verwenden Sie das Top-Modul, um eindeutige IDs zu generieren:

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

Verwenden Sie keine IDs, wenn Sie dies nicht benötigen, sondern verpacken Sie die Eingabe in ein Etikett wie das folgende:

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

Dann müssen Sie sich keine Gedanken mehr über eindeutige IDs machen.