在 React 中设置 Label 元素的 for 属性

一些元素，例如 HTML 中的标签元素，在 React (JSX) 中略有不同。本文将讨论不同之处，并向你展示如何在 React 中设置标签元素的 for 属性。

在 React 中设置标签元素的 for 属性

如果你尝试在 JSX 中创建几个 <label> 和 <input> 元素，则需要链接它们。这通常是 <label> 元素上的 for 属性的用途。

如果你遵循 HTML 中的这种模式并在这种类型的元素上设置 for 属性，它将不起作用。

将 JSX 编译成常规 HTML 的工具不会在最终的 HTML 输出中包含 for 属性。

除此之外，控制台将显示警告，敦促你改用 htmlFor 属性。

在 React 中正确设置标签元素的 for 属性

要将 <label> 元素与特定输入耦合，你只需记住在 JSX 中，我们使用 htmlFor 而不是 HTML 中的 for 属性。

让我们看一个实际的例子。

export default function App() {
    return (
    <div className="App">
        <label htmlFor="nameField">Enter your name</label>
        <input type="text" name="nameField"></input>
    </div>
    );
}

要记住两件事：要将其与标签元素相关联，你必须在 <input> 元素上设置 name 属性。

然后你可以将文本的 htmlFor 属性设置为相同的值，文本将与输入相关联。

查看 CodeSandbox 上的实时示例。你可以查看源文件以检查我们的 React 应用程序的纯 HTML 版本。

如果这样做，你会看到 <label> 元素确实具有 for 属性，正如它应该的那样。

将属性从 HTML 更改为 JSX

纯 HTML 中的一些属性在 React 中不存在，其他属性被重命名，在 React 中很少能找到但在 HTML 中却找不到。例如，复选框和单选按钮上的 checked 属性可让你快速访问它们的当前值并控制这些组件。

class 属性变成 className 因为 class 是 React 中的保留字。

在设置诸如 htmlFor 或 onChange 之类的属性时，请考虑 React 区分大小写，因此不要忘记使用 camelCase 约定。