React 中的單選按鈕
任何曾經在任何 JavaScript 框架中建立過簡單表單的開發人員都應該熟悉單選按鈕。它們是讓使用者在多個選項之間進行選擇時使用的預設 <input/>
型別。讓我們看看在 React 中實現單選按鈕的兩種方法。
React 中的單選按鈕
JSX 中單選按鈕的基本實現與 HTML 非常相似。讓我們看一個例子:
<div>
<input type="radio" name="theme" value="DARK"/>Dark
<input type="radio" name="theme" value="LIGHT"/>Light
</div>
這個 JSX 程式碼很容易被誤認為是普通的 HTML。隨著我們引入更復雜的特性,比如在 onChange
事件之後更新狀態,HTML 和 JSX 之間的差異變得更加明顯。讓我們看看這個例子:
class App extends Component {
constructor(props){
super(props)
this.state = {
theme: "light"
}
}
render() {
return <div onChange={(e) => this.setState({theme: e.target.value})}>
<input type="radio" name="theme" value="DARK"/>Dark
<input type="radio" name="theme" value="LIGHT"/>Light
</div>;
}
}
在此程式碼中,使用者有兩個選項:Dark 和 Light。每當他們選擇其中任何一個時,我們都會在輸入元素的 value
屬性中捕獲該值,並將狀態的 theme
屬性設定為等於它。為了更好地演示,請檢視示例 playcode app。
請注意,事件處理程式位於一對花括號之間。有必要說明大括號之間的表示式應該作為 JavaScript 程式碼執行。
作為開發人員,你不受事件處理程式選擇的限制。如果你使用按鈕提交你的選擇,你可以使用 onChange
、onSubmit
如果你的單選按鈕放置在 onClick
表單中。
.map()
如果你有一組選項,你可以使用 .map()
方法來渲染每個選項。例如,如果你有一個顏色列表供使用者選擇,你可以:
const arr = ["white", "black", "blue", "green"]
return (
<div>
{
arr.map(color =>
<input type="radio" name="colors" value={color} />
)
}
</div>
)
<div>
元素中的花括號告訴 React,它裡面的表示式應該作為 JavaScript 程式碼執行。
執行程式碼後,你將得到四個 <input>
元素,每個元素都有一個來自陣列的 value
屬性。
預設檢查
要預設檢查單選按鈕,你可以使用 defaultChecked
屬性。在上面的例子中,如果我們想設定一個預設的深色主題,我們的元素應該是這樣的:
<input type="radio" name="theme" defaultChecked value="DARK"/>Dark
自定義無線電元件
在開發 React 應用程式時,你應該始終嘗試使它們保持簡單。此外,如果你要大量使用單選按鈕功能,你可以通過建立自定義單選元件來避免程式碼重複。
const Radio = ({handler, theme}) => {
return <div style={{height: "500px", width: "500px", backgroundColor: theme.toLowerCase() === "light" ? "white" : "black"}}
onChange={handler}>
<input type="radio" name="theme" value="DARK"/>Dark
<input type="radio" name="theme" value="LIGHT"/>Light
</div>;
}
class App extends Component {
constructor(props){
super(props)
this.state = {
theme: "light"
}
}
render() {
const handleChange = (e) => this.setState({theme: e.target.value})
return <div><Radio handler={handleChange} theme={this.state.theme}></Radio></div>
}
}
在頂部,我們建立了一個名為 Radio
的無狀態功能元件。我們可以將事件處理程式作為 props 傳遞,所以這個子元件沒有真正的理由來啟動狀態。啞元件(那些沒有狀態的)也更容易測試和維護。
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