React 中的单选按钮

Irakli Tchigladze 2023年1月30日
  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