Bagaimana cara membuat ID unik untuk label formulir di React?

Saya memiliki elemen formulir dengan labels dan saya ingin memiliki ID unik untuk ditautkan labelke elemen dengan htmlForatribut. Sesuatu seperti ini:

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

Saya biasa membuat ID berdasarkan this._rootNodeIDtetapi tidak tersedia sejak React 0.13. Apa cara terbaik dan / atau termudah untuk melakukannya sekarang?

Solusi ini berfungsi dengan baik untuk saya.

utils/newid.js:

let lastId = 0;

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

Dan saya bisa menggunakannya seperti ini:

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

Tetapi itu tidak akan berfungsi di aplikasi isomorfik.

Ditambahkan 17.08.2015 . Selain fungsi custom newId, Anda bisa menggunakan uniqueId dari lodash.

Diperbarui 28.01.2016 . Lebih baik membuat ID dalam componentWillMount.

Id harus ditempatkan di dalam componentWillMount (update untuk 2018) constructor, bukan render. Memasukkannya renderakan menghasilkan kembali id ​​baru yang tidak perlu.

Jika Anda menggunakan garis bawah atau lodash, ada uniqueIdfungsi, jadi kode yang Anda hasilkan harus seperti:

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

Pembaruan 2019 Hooks:

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

Menindaklanjuti 2019-04-04, ini tampaknya dapat dicapai dengan React Hooks ' 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

Seperti yang saya pahami, Anda mengabaikan item larik kedua dalam pengrusakan larik yang memungkinkan Anda memperbarui id, dan sekarang Anda memiliki nilai yang tidak akan diperbarui lagi selama masa pakai komponen.

Nilai dari idakan menjadi di myprefix-<n>mana <n>nilai integer tambahan yang dikembalikan uniqueId. Jika itu tidak cukup unik untuk Anda, pertimbangkan untuk membuat suka sendiri

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

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

atau lihat perpustakaan yang saya terbitkan dengan ini di sini: https://github.com/rpearce/simple-uniqueid . Ada juga ratusan atau ribuan ID unik lainnya di luar sana, tetapi lodash uniqueIddengan awalan sudah cukup untuk menyelesaikan pekerjaan.

Perbarui 2019-07-10

Terima kasih kepada @Huong Hk karena telah mengarahkan saya ke status awal malas hooks , yang jumlahnya adalah Anda dapat meneruskan fungsi useStateyang hanya akan dijalankan pada pemasangan awal.

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

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

Anda bisa menggunakan pustaka seperti node-uuid untuk ini untuk memastikan Anda mendapatkan id unik.

Instal menggunakan:

npm install node-uuid --save

Kemudian di komponen react Anda, tambahkan yang berikut ini:

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

Semoga ini bermanfaat bagi siapa saja yang datang mencari solusi universal / isomorfik, karena masalah checksum yang membawa saya ke sini.

Seperti yang dikatakan di atas, saya telah membuat utilitas sederhana untuk membuat id baru secara berurutan. Karena ID terus bertambah di server, dan mulai dari 0 di klien, saya memutuskan untuk mengatur ulang kenaikan setiap SSR dimulai.

// utility to generate ids
let current = 0

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

export function resetIdCounter () { current = 0 }

Dan kemudian di konstruktor komponen root atau componentWillMount, panggil reset. Ini pada dasarnya menyetel ulang cakupan JS untuk server di setiap render server. Di klien itu tidak (dan seharusnya) tidak berpengaruh.

Untuk penggunaan biasa dari labeldan input, akan lebih mudah untuk memasukkan input ke dalam label seperti ini:

import React from 'react'

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

Ini juga memungkinkan di kotak centang / radiobuttons untuk menerapkan padding ke elemen root dan masih mendapatkan umpan balik dari klik pada masukan.

Saya menemukan solusi mudah seperti ini:

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

Cara sederhana lainnya dengan ketikan:

static componentsCounter = 0;

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

Saya membuat modul generator uniqueId (Typecript):

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

export default uniqueId;

Dan gunakan modul atas untuk menghasilkan id unik:

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

Jangan gunakan ID sama sekali jika Anda tidak perlu, alih-alih bungkus input dalam label seperti ini:

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

Maka Anda tidak perlu khawatir tentang ID unik.