react教程，如何理解使用react中label的htmlFor属性？

我们相信：世界是美好的，你是我也是。平行空间的世界里面，不同版本的生活也在继续...

react里面又又又颠覆了传统html的一个标签（属性）的写法，那就是label的for属性，颠覆成了htmlFor属性，存在即为合理。本文对这个label的for属性，在react中，就是htmlFor属性，进行一下简单的探讨。

其实，在react没出来之前，js就是使用htmlFor来访问.for属性的...

苏南大叔的程序如此灵动博客，记录苏南大叔的代码故事。本文测试环境：create-react-app@5.0.1，react@18.2.0，react-dom@18.2.0，node@16.14.2。特别临时强调一点，在react项目中，大小写非常重要，切换一个大小写，可能指代的对象就不一样了。

传统写法

传统的这种for属性，是用来在表单里面绑定文字和表单项（的id属性）目的。点击文字描述的时候，就会自动触发对应表单框的聚焦动作。虽然这个效果不错，但是实际应用上却并不是太常见。

使用范例如下：

<label for=":r1:-name">Name</label>
<input id=":r1:-name" type="text"><br>
<label for="php">PHP</label>
<input type="radio" name="lang" id="php" value="php"><br>
<label for="python">Python</label>
<input type="radio" name="lang" id="python" value="python"><br>
<label for="node">Nodejs</label>
<input type="checkbox" id="node" value="node"><br>

相关文档：
https://newsn.net/say/html-form.html

如果使用label直接包裹文字和输入项的话，那么是可以不写for属性的，默认就实现了上述的绑定操作了。

<label>Password<input id="password" type="password"></label>

普通js脚本访问htmlFor属性

<label id=":r1:-name-label" for=":r1:-name">Name</label>
<input id=":r1:-name" type="text"><br>
<script>
var a1 = document.getElementById(":r1:-name-label").htmlFor; // :r1:-name
var a2 = document.getElementById(":r1:-name-label").for;     // undefined
var a3 = document.getElementById(":r1:-name-label").id;      // :r1:-name-label
console.log(a1,a2,a3);
</script>

在网页js脚本里面访问这个for，居然使用的也是htmlFor，也许这就是react中使用htmlFor的原因吧。可能是因为for在javascript里面是个关键保留字。

react中的新写法

react中把这个for属性变成了htmlFor属性，其它的使用方式不变。例如：

import { useId } from "react";
const App = () => {
  const id = useId();
  return (<>
    <label htmlFor={id + '-firstName'}>First Name</label>
    <input id={id + '-firstName'} type="text" /><br />
    <label htmlFor={id + '-lastName'}>Last Name</label>
    <input id={id + '-lastName'} type="text" /><br />
  </>)
}
export default App;

关键代码就是：

htmlFor=""

题外话useId()

在react官方文档中，这个地方htmlFor对应的id，往往采用useId()来生成个随机前缀。表面上来看，仅仅是个随机前缀的问题，事实上，根据官方文档描述，useId()的存在意义可并不是这样的。

大家通常意义上的理解是完全错误的，并不符合react官方对useId()的官方设定。当然，本文的useId()的使用也是官方提供的例子，但是并不能说明官方的使用意图。官方用这个useId()的真实意图也不仅仅是提供个前缀的，待后续讨论相关内容。

• https://reactjs.org/docs/hooks-reference.html#useid

结束语

更多react相关经验文章，请点击苏南大叔的博客文章：

• https://newsn.net/tag/react/

如果本文对您有帮助，或者节约了您的时间，欢迎打赏瓶饮料，建立下友谊关系。
本博客不欢迎：各种镜像采集行为。请尊重原创文章内容，转载请保留作者链接。