在 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 約定。