Làm cách nào để tạo ID duy nhất cho nhãn biểu mẫu trong React?

Tôi có các phần tử biểu mẫu với labels và tôi muốn có ID duy nhất để liên kết labels với các phần tử có htmlForthuộc tính. Một cái gì đó như thế này:

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

Tôi đã sử dụng để tạo ID dựa trên this._rootNodeIDnhưng nó không khả dụng kể từ React 0.13. Cách tốt nhất và / hoặc đơn giản nhất để làm điều đó bây giờ là gì?

Giải pháp này hoạt động tốt cho tôi.

utils/newid.js:

let lastId = 0;

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

Và tôi có thể sử dụng nó như thế này:

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

Nhưng nó sẽ không hoạt động trong các ứng dụng đẳng hình.

Đã thêm 17.08.2015 . Thay vì chức năng newId tùy chỉnh, bạn có thể sử dụng uniqueId từ lodash.

Cập nhật ngày 28.01.2016 . Tốt hơn là tạo ID trong componentWillMount.

Id nên được đặt bên trong thành phầnWillMount (cập nhật cho năm 2018) constructor, không render. Đưa nó vào rendersẽ tạo lại id mới một cách không cần thiết.

Nếu bạn đang sử dụng dấu gạch dưới hoặc dấu gạch ngang, có một uniqueIdhàm, vì vậy mã kết quả của bạn sẽ giống như:

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

Cập nhật móc 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>
  );
}

Theo sau kể từ 2019-04-04, điều này dường như có thể được thực hiện với React Hook ' 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

Theo tôi hiểu, bạn bỏ qua mục mảng thứ hai trong việc hủy mảng sẽ cho phép bạn cập nhật id và bây giờ bạn đã có một giá trị sẽ không được cập nhật lại cho vòng đời của thành phần.

Giá trị của idsẽ là myprefix-<n>nơi <n>giá trị nguyên tăng dần được trả về uniqueId. Nếu điều đó không đủ độc đáo cho bạn, hãy cân nhắc việc tự làm

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

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

hoặc kiểm tra thư viện tôi đã xuất bản với điều này tại đây: https://github.com/rpearce/simple-uniqueid . Ngoài ra còn có hàng trăm hoặc hàng ngàn thứ ID duy nhất khác ngoài đó, nhưng những từ uniqueIdcó tiền tố là đủ để hoàn thành công việc.

Cập nhật 2019-07-10

Cảm ơn @Huong Hk đã chỉ cho tôi móc trạng thái ban đầu lười biếng , tổng số đó là bạn có thể truyền một hàm cho useStatenó sẽ chỉ được chạy trên mount ban đầu.

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

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

Bạn có thể sử dụng một thư viện như nút-uuid cho việc này để đảm bảo bạn có được các id duy nhất.

Cài đặt bằng:

npm install node-uuid --save

Sau đó, trong thành phần phản ứng của bạn thêm vào như sau:

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

Hy vọng rằng điều này hữu ích cho bất kỳ ai đang tìm kiếm một giải pháp phổ quát / đẳng cấu, vì vấn đề tổng kiểm tra là nguyên nhân dẫn tôi đến đây ngay từ đầu.

Như đã nói ở trên, tôi đã tạo một tiện ích đơn giản để tuần tự tạo một id mới. Vì ID liên tục tăng trên máy chủ và bắt đầu lại từ 0 trong máy khách, tôi quyết định đặt lại mức tăng mỗi SSR bắt đầu.

// utility to generate ids
let current = 0

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

export function resetIdCounter () { current = 0 }

Và sau đó, trong hàm tạo của thành phần gốc hoặc thành phầnWillMount, hãy gọi thiết lập lại. Điều này về cơ bản đặt lại phạm vi JS cho máy chủ trong mỗi máy chủ kết xuất. Trong máy khách, nó không (và không nên) có bất kỳ ảnh hưởng nào.

Đối với các cách sử dụng thông thường của labelvà input, thật dễ dàng hơn để bọc đầu vào vào một nhãn như thế này:

import React from 'react'

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

Nó cũng cho phép các hộp kiểm / radiobutton có thể áp dụng phần đệm cho phần tử gốc và vẫn nhận được phản hồi khi nhấp vào đầu vào.

Tôi tìm thấy một giải pháp dễ dàng như thế này:

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

Cách đơn giản khác với bản thảo:

static componentsCounter = 0;

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

Tôi tạo một mô-đun trình tạo uniqueId (Bản mô tả):

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

export default uniqueId;

Và sử dụng mô-đun hàng đầu để tạo id duy nhất:

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

Hoàn toàn không sử dụng ID nếu bạn không cần, thay vào đó hãy bọc đầu vào trong một nhãn như thế này:

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

Sau đó, bạn sẽ không cần phải lo lắng về ID duy nhất.