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

小编典典

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

all

我有带有labels 的表单元素，我希望有唯一的 ID 来将 s 链接到具有属性label的元素。htmlFor像这样的东西：

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

我曾经根据this._rootNodeIDReact 0.13 生成 ID，但它不可用。现在最好和/或最简单的方法是什么？

阅读 62

2022-08-05

共1个答案

小编典典

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

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 。您可以使用 lodash 中的 uniqueId 而不是自定义
newId函数。

更新 28.01.2016 。最好在componentWillMount.

2022-08-05