React 中的單選按鈕

Irakli Tchigladze 2023年1月30日 2022年5月18日
  1. React 中的單選按鈕
  2. 自定義無線電元件
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 程式碼執行。

作為開發人員,你不受事件處理程式選擇的限制。如果你使用按鈕提交你的選擇,你可以使用 onChangeonSubmit 如果你的單選按鈕放置在 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 Tchigladze avatar Irakli Tchigladze avatar

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

相關文章 - React Button