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

小能豆

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

javascript

我有带 s 的表单元素label，并且希望使用唯一 ID 将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 开始它不再可用。现在最好的和/或最简单的方法是什么？

阅读 54

2024-06-03

小能豆

这个解决方案对我来说很有效。

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

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

2024-06-03

小能豆

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

2024-06-03

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

共2个答案