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

我有带有labels的表单元素，并且我希望有唯一的ID将labels 链接到具有htmlForattribute的元素。像这样：

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

但它在同构应用程序中不起作用。

添加17.08.2015。相反，自定义NEWID的功能，您可以使用UNIQUEID从lodash。

更新28.01.2016。最好在中生成ID componentWillMount。

该ID应该放置在componentWillMount（更新为2018）内部constructor，而不是render。放入它render会不必要地重新生成新的ID。

如果使用下划线或破折号，则有一个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>
  );
}

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年4月4日，这似乎可以通过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-'))

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

使用以下方法安装：

npm install node-uuid --save

然后在您的react组件中添加以下内容：

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

希望这对任何寻求通用/同构解决方案的人都有帮助，因为首先导致校验和问题的原因是我。

如上所述，我已经创建了一个简单的实用程序来顺序创建新的id。由于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中，调用reset。这实际上是在每个服务器渲染中重置服务器的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}`} />
    );
  }
}

使用打字稿的其他简单方法：

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;

并使用顶层模块生成唯一的ID：

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。