Як генерувати унікальні ідентифікатори для міток форми в React?

У мене є елементи форми з labels, і я хочу мати унікальні ідентифікатори для зв’язку labels до елементів з htmlForатрибутом. Щось на зразок цього:

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

Я використовував для створення ідентифікаторів на основі, 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"/>
        );
    }
});

Але це не працюватиме в ізоморфних додатках.

Додано 17.08.2015 . Замість спеціальної функції newId ви можете використовувати uniqueId від lodash.

Оновлено 28.01.2016 . Краще генерувати ідентифікатор у componentWillMount.

Ідентифікатор повинен бути розміщений всередині компонента компонента WillMount (оновлення на 2018 рік) constructor, а не render. Поміщення його renderзнову породжує нові ідентифікатори.

Якщо ви використовуєте підкреслення або подачу, є 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, здається, це вдасться досягти за допомогою Реактивних гачків 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

Як я розумію, ви ігноруєте другий елемент масиву в деструктуризації масиву, який дозволить вам оновити 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 . Є також сотні чи тисячі інших унікальних речей, що стосуються ідентифікації, але лодашів uniqueIdз префіксом має бути достатньо, щоб виконати роботу.

Оновити 2019-07-10

Завдяки @Huong Hk за те, що він вказав мені на гачки лінивого початкового стану , сума якого полягає в тому, що ви можете передати функцію, useStateяка буде запускатися лише на початковому кріпленні.

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

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

Ви можете використовувати для цього бібліотеку, наприклад node-uuid, щоб переконатися, що ви отримаєте унікальні ідентифікатори.

Встановити за допомогою:

npm install node-uuid --save

Потім у свій компонент реакції додайте наступне:

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

Сподіваємось, це корисно для всіх, хто приходить шукати універсальне / ізоморфне рішення, оскільки питання контрольної суми - це те, що призвело мене сюди насамперед.

Як було сказано вище, я створив просту утиліту для послідовного створення нового ідентифікатора. Оскільки ідентифікатори збільшуються на сервері і починаються з 0 на клієнті, я вирішив скинути приріст кожного запуску SSR.

// utility to generate ids
let current = 0

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

export function resetIdCounter () { current = 0 }

А потім у конструкторі кореневого компонента або компонентаWillMount викличте скидання. Це по суті скидає область 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}`} />
    );
  }
}

Інший простий спосіб з машинописом:

static componentsCounter = 0;

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

Я створюю унікальний модуль генератора ID (Typescript):

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

export default uniqueId;

І використовуйте верхній модуль для створення унікальних ідентифікаторів:

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

Не використовуйте ідентифікатори взагалі, якщо вам не потрібно, замість цього загортайте вкладку таким чином:

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

Тоді вам не потрібно буде турбуватися про унікальні ідентифікатори.