如何在React中为表单标签生成唯一ID？

Question

我有labels的表单元素,我希望有唯一的ID来链接labels到具有htmlFor属性的元素.像这样的东西:

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

我过去常常根据this._rootNodeIDReact 0.13 生成ID,但它不可用.现在最好和/或最简单的方法是什么？

Answer 1

更新反应 18

React 18 引入了一个新的钩子，它生成一个唯一的 ID：

const id = useId();

挂钩 API 文档： https: //react.dev/reference/react/useId

从您的示例中，您可以在组件内调用挂钩：

import React, { useId } from 'react'

function TextField = (props) => {
  // generate unique ID
  const id = useId(); 

  return (
    <>
      <label htmlFor={id}>My label</label>
      <input id={id} type="text"/>
    </>
  );
}

Answer 2

这个解决方案适合我.

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.

更新于2016年1月28日.最好在中生成ID componentWillMount.

Answer 3

id应该放在componentWillMount(更新为2018)内constructor,而不是render.将其放入render将不必要地重新生成新的ID.

如果你使用下划线或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>
  );
}

Answer 4

从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东西，但是uniqueId带有前缀的lodash 足以完成任务。

更新2019-07-10

感谢@Huong Hk为我指出了钩子惰性初始状态，其总和是您可以将函数传递给useState该钩子，该函数将仅在初始安装上运行。

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

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

Answer 5

您可以使用诸如node-uuid 之类的库来确保您获得唯一的 ID。

安装使用：

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

Answer 6

扩展@foriall的评论

如果整个目标是链接 a<label>和<input>元素并且它们不依赖于 props，那么最好和性能最好的方法是使用useRef.

useRef 返回一个可变的 ref 对象，其.current属性被初始化为传递的参数 (initialValue)。返回的对象将在组件的整个生命周期内持续存在。

意思是，您可以用来useRef模仿实例变量，这些变量不会在 props 更改时重新计算。useRef不仅仅用于引用 DOM 元素。

使用外部随机 ID 生成器的示例（例如 loadash）

import React, { useRef } from 'react'
import uniqueId from 'lodash/utility/uniqueId'

function InputField = (props) => {
  const {current: fieldId} = useRef(uniqueId('prefix-'))
  return (
    <div>
      <input id={fieldId} type="checkbox" />
      <label htmlFor={fieldId}>label</label>
    </div>
  );
}

使用简单的自定义随机 ID 生成器的示例

import React, { useRef } from 'react'

function InputField = (props) => {
  const {current: fieldId} = useRef("prefix-" + (Math.random().toString(36)+'00000000000000000').slice(2, 7))
  return (
    <div>
      <input id={fieldId} type="checkbox" />
      <label htmlFor={fieldId}>label</label>
    </div>
  );
}

解释：

上面的随机 ID(Math.random().toString(36)+'00000000000000000').slice(2, 7)来自stackoverflow 答案，并且始终保证5 个字符，相比之下Math.random().toString(16).slice(-4)可能会返回空字符串。

此外，使用前缀也很重要，其中前缀必须以字母开头([A-Za-z])才能成为有效的HTML4 id属性值。