React'te form etiketleri için benzersiz kimlikler nasıl oluşturulur?

S'li form öğelerim var ve labels'yi öznitelikli labelöğelere bağlamak için benzersiz kimliklerim olmasını istiyorum htmlFor. Bunun gibi bir şey:

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

Eskiden ID'leri temel this._rootNodeIDalırdım ama React 0.13'ten beri mevcut değil. Bunu şimdi yapmanın en iyi ve / veya en basit yolu nedir?

Bu çözümler benim için iyi çalışıyor.

utils/newid.js:

let lastId = 0;

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

Ve bunu şu şekilde kullanabilirim:

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

Ancak izomorfik uygulamalarda çalışmaz.

17.08.2015 eklendi . Bunun yerine özel NewID ait kullanabileceğiniz işlev UNIQUEID lodash dan.

28.01.2016 tarihinde güncellendi . İçinde kimlik oluşturmak daha iyidir componentWillMount.

Kimlik, içine yerleştirilmelidir componentWillMount'un (2018 için güncelleme)constructor , değil render. İçine koymakrender gereksiz yere yeni kimlikler oluşturacaktır.

Alt çizgi veya zigzag kullanıyorsanız, bir uniqueId işlev vardır, dolayısıyla ortaya çıkan kodunuz aşağıdaki gibi olmalıdır:

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 güncellemesi:

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 itibarıyla bu, React Hooks ile başarılabilecek gibi görünüyor 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

Anladığım kadarıyla, güncelleme yapmanıza izin verecek dizi yıkımındaki ikinci dizi öğesini görmezden geliyorsunuz. id ve şimdi bileşenin ömrü boyunca tekrar güncellenmeyecek bir değeriniz var.

Değeri idolacaktır myprefix-<n>burada <n>dönen bir artımlı tamsayı değerdir uniqueId. Bu sizin için yeterince benzersiz değilse, kendi beğeninizi yapmayı düşünün

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

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

veya bununla birlikte yayınladığım kütüphaneye bakın: https://github.com/rpearce/simple-uniqueid . Orada yüzlerce veya binlerce başka benzersiz kimlik bilgisi de var, ancak uniqueIdön ekli lodash'lar işi bitirmek için yeterli olmalı.

Güncelleme 2019-07-10

Beni tembel başlangıç ​​durumuna yönlendirdiği için @ Huong Hk'ye teşekkürler , bunun toplamı, useStateyalnızca ilk bağlantıda çalıştırılacak olan bir işlevi iletebilmenizdir .

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

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

Gibi bir kitaplık kullanabilirsiniz Benzersiz kimlikler aldığınızdan emin olmak için bunun için node-uuid .

Şunları kullanarak kurun:

npm install node-uuid --save

Ardından react bileşeninize aşağıdakileri ekleyin:

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

Umarım bu, evrensel / izomorfik bir çözüm arayan herkes için yararlıdır, çünkü sağlama toplamı sorunu beni buraya en başta getiren şeydi.

Yukarıda belirtildiği gibi, sırayla yeni bir kimlik oluşturmak için basit bir yardımcı program oluşturdum. Kimlikler sunucuda artmaya devam ettiğinden ve istemcide 0'dan baştan başladığından, SSR'nin başladığı her artışı sıfırlamaya karar verdim.

// utility to generate ids
let current = 0

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

export function resetIdCounter () { current = 0 }

Ve sonra kök bileşenin yapıcısında veya componentWillMount'ta sıfırlamayı çağırın. Bu, esasen her bir sunucu oluşturmada sunucu için JS kapsamını sıfırlar. İstemcide herhangi bir etkisi yoktur (ve olmamalıdır).

Olağan kullanımlar için labelve input, böyle bir etikete girdi sarmak için sadece kolay:

import React from 'react'

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

Ayrıca, onay kutularında / radyo düğmelerinde kök öğeye dolgu uygulanmasını ve yine de girdiye tıklama geri bildirimi almayı mümkün kılar.

Bunun gibi kolay bir çözüm buldum:

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

Daktilo ile diğer basit yol:

static componentsCounter = 0;

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

Benzersiz bir kimlik oluşturucu modülü oluşturuyorum (Typescript):

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

export default uniqueId;

Ve benzersiz kimlikler oluşturmak için üst modülü kullanın:

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

İhtiyaç duymuyorsanız kimlikleri kullanmayın, bunun yerine girişi aşağıdaki gibi bir etikete sarın:

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

O zaman benzersiz kimlikler hakkında endişelenmenize gerek kalmaz.