在本教程中，我们将学习如何在React用户表单中为标签添加for。
React框架忽略了标签元素的for属性。
在HTML标签中，"for "属性有什么作用？
React提供了创建网站的网络可访问性指南。它帮助我们每个人都能浏览和访问页面内容。标签有助于了解每个表单输入控件的人类可读文本，并帮助盲人、键盘和鼠标用户。
当你在Html页面中创建一个表单时，你将创建一个标签和输入，并绑定在一起，如下图所示
<label for="name">Name</label>
<input id="name" type="text" />
通常情况下，标签是通过for 属性与输入文本绑定的。输入控件的id与标签的for属性相匹配。这适用于复选框、单选和选择控件。
如果你在React JSX中使用同样的代码，它在组件加载过程中会中断
并抛出以下错误
无效的DOM属性for 。你是说htmlFor 吗？
React没有标签的for 属性。它定义了htmlFor 属性。
原因是，你在用JSX语法写html代码。JSX是对javascript的扩展，可以执行javascript代码。for 是javascript中的一个关键字或保留词。所以我们不能直接使用
所以我们必须使用htmlFor 属性，如下图所示
注意：React是区分大小写的，第一个字母是小写的，第二个字母是大写的 下面是一个标签组件的React例子
import React, { Component } from 'react';
import { render } from 'react-dom';
import Hello from './Hello';
import './style.css';
interface AppProps {}
interface AppState {
name: string;
}
class App extends Component {
constructor(props) {
super(props);
this.state = {
name: 'React'
};
}
render() {
return (
Name
);
}
}
render(, document.getElementById('root'));
一旦这个组件被渲染，生成的DOM包含for 属性，而不是htmlFor 属性的标签。当你检查代码时，你会看到以下代码
<html class=" "><head>
</head>
<body><div id="root"><div><label for="name">Name</label><input id="name" type="text"></div></div></body></html>
