Jak wygenerować unikalne identyfikatory dla etykiet formularzy w React?

Mam elementy formularza z labelsi chcę mieć unikalne identyfikatory, aby połączyć labelje z elementami z htmlForatrybutem. Coś takiego:

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

Kiedyś generowałem identyfikatory na podstawie, this._rootNodeIDale jest niedostępne od React 0.13. Jaki jest najlepszy i / lub najprostszy sposób, aby to zrobić teraz?

To rozwiązanie działa dobrze dla mnie.

utils/newid.js:

let lastId = 0;

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

I mogę tego użyć w ten sposób:

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

Ale nie będzie działać w aplikacjach izomorficznych.

Dodano 17.08.2015 . Zamiast niestandardowej funkcji newId możesz użyć uniqueId z lodash.

Zaktualizowano 28.01.2016 . Lepiej jest wygenerować ID w componentWillMount.

Identyfikator należy umieścić w module componentWillMount (aktualizacja na 2018 r.) constructor, A nie render. Wprowadzenie go renderspowoduje niepotrzebne ponowne wygenerowanie nowych identyfikatorów.

Jeśli używasz podkreślenia lub lodash, istnieje uniqueIdfunkcja, więc wynikowy kod powinien wyglądać mniej więcej tak:

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

Aktualizacja haków 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>
  );
}

Po 04.04.2019 wydaje się, że można to osiągnąć za pomocą haków React 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

Jak rozumiem, ignorujesz drugi element tablicy w procesie destrukturyzacji tablicy, który pozwoliłby na aktualizację id, a teraz masz wartość, która nie zostanie ponownie zaktualizowana przez cały okres użytkowania komponentu.

Wartość idwill to myprefix-<n>gdzie <n>jest zwracana przyrostowa wartość całkowita uniqueId. Jeśli to nie jest dla Ciebie wystarczająco wyjątkowe, rozważ stworzenie własnego lajka

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

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

lub sprawdź bibliotekę, którą opublikowałem wraz z tym tutaj: https://github.com/rpearce/simple-uniqueid . Istnieją również setki lub tysiące innych unikalnych identyfikatorów, ale lodash uniqueIdz prefiksem powinien wystarczyć, aby wykonać zadanie.

Aktualizacja 2019-07-10

Dzięki @Huong Hk za wskazanie mi leniwego stanu początkowego hooków , którego sumą jest to, że możesz przekazać funkcję, useStatektóra zostanie uruchomiona tylko na początkowym montowaniu.

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

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

Możesz użyć do tego biblioteki, takiej jak node-uuid, aby upewnić się, że otrzymujesz unikalne identyfikatory.

Zainstaluj za pomocą:

npm install node-uuid --save

Następnie w komponencie reaguj dodaj:

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

Mam nadzieję, że jest to pomocne dla każdego, kto szuka uniwersalnego / izomorficznego rozwiązania, ponieważ kwestia sumy kontrolnej doprowadziła mnie do tego w pierwszej kolejności.

Jak wspomniano powyżej, stworzyłem proste narzędzie do sekwencyjnego tworzenia nowego identyfikatora. Ponieważ identyfikatory stale rosną na serwerze i zaczynają od 0 w kliencie, zdecydowałem się zresetować przyrost przy każdym uruchomieniu SSR.

// utility to generate ids
let current = 0

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

export function resetIdCounter () { current = 0 }

Następnie w konstruktorze komponentu głównego lub componentWillMount wywołaj reset. To zasadniczo resetuje zakres JS dla serwera w każdym renderowaniu serwera. W kliencie nie ma to (i nie powinno) mieć żadnego efektu.

W przypadku zwykłych zastosowań labeli inputpo prostu łatwiej jest umieścić dane wejściowe w takiej etykiecie:

import React from 'react'

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

Umożliwia również w polach wyboru / przyciskach radiowych stosowanie dopełnienia do elementu głównego i nadal otrzymywanie informacji zwrotnych o kliknięciu wejścia.

Znalazłem takie proste rozwiązanie:

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

Inny prosty sposób z maszynopisem:

static componentsCounter = 0;

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

Tworzę moduł generatora uniqueId (Typescript):

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

export default uniqueId;

I użyj górnego modułu do generowania unikalnych identyfikatorów:

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

W ogóle nie używaj identyfikatorów, jeśli nie musisz, zamiast tego zawiń dane wejściowe etykietą taką jak ta:

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

Wtedy nie musisz martwić się o unikalne identyfikatory.