如何在React中为表单标签生成唯一in？
如何在React中为表单标签生成唯一in？
提问于 2015-04-03 03:22:37
我有具有label的表单元素，并且我希望有唯一的ID来将label链接到具有htmlFor属性的元素。如下所示：
React.createClass({
render() {
const id = ???;
return (
<label htmlFor={id}>My label</label>
<input id={id} type="text"/>
);
}
});我曾经基于this._rootNodeID生成I，但是从React 0.13开始就不能使用了。现在最好和/或最简单的方法是什么？
回答 8
Stack Overflow用户
发布于 2016-01-09 00:58:10
您可以使用像node-uuid这样的库来确保获得惟一的ids。
使用以下命令进行安装：
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>
);
}
}Stack Overflow用户
发布于 2017-07-13 04:02:00
希望这对任何寻求通用/同构解决方案的人都有帮助，因为校验和问题是我最初来到这里的原因。
如上所述，我已经创建了一个简单的实用程序来按顺序创建一个新的id。由于I在服务器上不断递增，并且在客户端从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作用域。在客户端，它没有(也不应该)有任何影响。
Stack Overflow用户
发布于 2021-10-12 09:50:40
没有使用钩子的Lodash版本：
function useUniqueId() {
const [id] = useState(() => `component-${Math.random().toString(16).slice(2)}`)
return id
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/29420835
复制相关文章
相似问题