จะสร้าง ID เฉพาะสำหรับป้ายกำกับแบบฟอร์มใน React ได้อย่างไร?

ฉันมีองค์ประกอบของรูปแบบที่มีlabels และฉันต้องการมีรหัสเฉพาะเพื่อเชื่อมโยงlabels กับองค์ประกอบที่มีhtmlForแอตทริบิวต์ สิ่งนี้:

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

ฉันเคยสร้าง ID ตาม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"/>
        );
    }
});

แต่จะใช้ไม่ได้ในแอป isomorphic

เพิ่ม 2015/08/17 แทนที่จะใช้ฟังก์ชัน newId ที่กำหนดเองคุณสามารถใช้uniqueIdจาก lodash ได้

Updated 2016/01/28 componentWillMountมันจะดีกว่าที่จะสร้างรหัสใน

รหัสควรจะวางไว้ด้านในของcomponentWillMount (ปรับปรุง 2018) ไม่constructor renderการใส่เข้าไปrenderจะสร้างรหัสใหม่ขึ้นมาใหม่โดยไม่จำเป็น

หากคุณใช้ขีดล่างหรือ lodash มี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>
  );
}

อัปเดต Hooks 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 ดูเหมือนว่าจะสามารถทำได้ด้วย 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

ตามที่ฉันเข้าใจคุณไม่สนใจรายการอาร์เรย์ที่สองในการทำลายโครงสร้างอาร์เรย์ที่อนุญาตให้คุณอัปเดต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 นอกจากนี้ยังมี ID ที่เป็นเอกลักษณ์อื่น ๆ อีกหลายร้อยหรือหลายพันรายการ แต่ lodash ที่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>
    );
  }   
}

หวังว่านี่จะเป็นประโยชน์สำหรับทุกคนที่กำลังมองหาโซลูชันสากล / isomorphic เนื่องจากปัญหาการตรวจสอบคือสิ่งที่ทำให้ฉันมาที่นี่ตั้งแต่แรก

ดังที่ได้กล่าวไว้ข้างต้นฉันได้สร้างยูทิลิตี้ง่ายๆเพื่อสร้างรหัสใหม่ตามลำดับ เนื่องจาก ID ยังคงเพิ่มขึ้นเรื่อย ๆ บนเซิร์ฟเวอร์และเริ่มต้นใหม่จาก 0 ในไคลเอนต์ฉันจึงตัดสินใจรีเซ็ตการเพิ่มแต่ละครั้งที่ SSR เริ่มต้น

// utility to generate ids
let current = 0

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

export function resetIdCounter () { current = 0 }

จากนั้นในคอนสตรัคเตอร์ของคอมโพเนนต์รากหรือ componentWillMount ให้เรียกการรีเซ็ต สิ่งนี้จะรีเซ็ตขอบเขต 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}`} />
    );
  }
}

วิธีง่ายๆอื่น ๆ ด้วย typescript:

static componentsCounter = 0;

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

ฉันสร้างโมดูลตัวสร้าง uniqueId (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>
  );
};     

อย่าใช้ ID เลยหากคุณไม่ต้องการให้ห่ออินพุตไว้ในป้ายกำกับเช่นนี้แทน:

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

จากนั้นคุณจะไม่ต้องกังวลเกี่ยวกับ ID ที่ไม่ซ้ำกัน