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