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