在 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 約定。
Irakli is a writer who loves computers and helping people solve their technical problems. He lives in Georgia and enjoys spending time with animals.
LinkedIn