如何在 ReactJS 中使用单选按钮
介绍
在使用 Web 应用程序时，您可能需要使用各种表单控件（如文本框、复选框、下拉菜单、文件上传或单选按钮），以便使用 HTML 元素或 React 的第三方库（例如material-ui）。
在本指南中，您将了解单选按钮的基础知识、如何在组中使用它以及如何在更改事件时访问选定的单选按钮值。
使用单选按钮组
单选按钮允许用户从多个单选按钮列表中选择一个选项并提交其值。
例如，下面是如何在没有表单的情况下使用单选按钮的方法：
render() {
return (
<div>
<input type="radio" value="Male" name="gender" /> Male
<input type="radio" value="Female" name="gender" /> Female
<input type="radio" value="Other" name="gender" /> Other
</div>
);
}
在此示例中，有三个单选按钮和一个名为gender 的附加属性。
因为该名称属性将所有单选按钮放入一个组中，所以一旦用户选择其中任何一个，您就可以获取其值，如下所述。
import React, { Component } from "react";
class Demo1 extends Component {
constructor() {
super();
this.state = {
name: "React"
};
this.onChangeValue = this.onChangeValue.bind(this);
}
onChangeValue(event) {
console.log(event.target.value);
}
render() {
return (
<div onChange={this.onChangeValue}>
<input type="radio" value="Male" name="gender" /> Male
<input type="radio" value="Female" name="gender" /> Female
<input type="radio" value="Other" name="gender" /> Other
</div>
);
}
}
export default Demo1;
函数onChangeValue()与div附加在一起，因此只要用户选择任何单选按钮，它就会反映在函数中。
在表单中使用单选按钮组
前面的示例使用了带有更改操作的单选按钮，但您也可以使用带有表单的单选按钮组。
设置一个带有像这样的单选按钮组的表单。
render() {
return (
<form onSubmit={this.formSubmit}>
<div className="radio">
<label>
<input
type="radio"
value="Male"
checked={this.state.selectedOption === "Male"}
onChange={this.onValueChange}
/>
Male
</label>
</div>
<div className="radio">
<label>
<input
type="radio"
value="Female"
checked={this.state.selectedOption === "Female"}
onChange={this.onValueChange}
/>
Female
</label>
</div>
<div className="radio">
<label>
<input
type="radio"
value="Other"
checked={this.state.selectedOption === "Other"}
onChange={this.onValueChange}
/>
Other
</label>
</div>
<div>
Selected option is : {this.state.selectedOption}
</div>
<button className="btn btn-default" type="submit">
Submit
</button>
</form>
);
}
正如您在上面的示例中看到的，表单中有三个不同的单选按钮以及提交按钮，并且每个单选按钮都附加一个onChange函数，称为onValueChange()。
onValueChange(event) {
this.setState({
selectedOption: event.target.value
});
}
当用户从组中选择单选按钮时，将调用 onChangeValue() 函数，并将值更新到组件状态中。
当用户完成选择后，他们可能想要提交表单。提交方法称为formSubmit()。
formSubmit(event) {
event.preventDefault();
console.log(this.state.selectedOption)
}
一旦用户提交表单，将状态值传递给 API 端点以发布或更新数据。
完整的示例应如下所示。
import React, { Component } from "react";
class Demo2 extends Component {
constructor() {
super();
this.state = {
name: "React"
};
this.onValueChange = this.onValueChange.bind(this);
this.formSubmit = this.formSubmit.bind(this);
}
onValueChange(event) {
this.setState({
selectedOption: event.target.value
});
}
formSubmit(event) {
event.preventDefault();
console.log(this.state.selectedOption)
}
render() {
return (
<form onSubmit={this.formSubmit}>
<div className="radio">
<label>
<input
type="radio"
value="Male"
checked={this.state.selectedOption === "Male"}
onChange={this.onValueChange}
/>
Male
</label>
</div>
<div className="radio">
<label>
<input
type="radio"
value="Female"
checked={this.state.selectedOption === "Female"}
onChange={this.onValueChange}
/>
Female
</label>
</div>
<div className="radio">
<label>
<input
type="radio"
value="Other"
checked={this.state.selectedOption === "Other"}
onChange={this.onValueChange}
/>
Other
</label>
</div>
<div>
Selected option is : {this.state.selectedOption}
</div>
<button className="btn btn-default" type="submit">
Submit
</button>
</form>
);
}
}
export default Demo2;
这个完整的示例在表单中使用了一个单选按钮组。一旦用户提交表单，该值将用于 API 端点通信。单选按钮的checked属性负责在从当前状态中找到合适的值后将其选中。
来自第三方库的单选按钮
您可以使用类型为单选按钮的 HTML 输入。如果您需要使用不同的样式，请使用一些提供单选按钮元素的第三方库：
- 材质界面
- react-radio-buttons
- react-radio-button
- react-radio-button-group
- react-radio-group
结论
本指南解释了如何将单选按钮作为一个组使用、如何将它们与表单元素一起使用、以及在何处可以找到来自各种第三方来源的单选按钮。
这就是使用单选按钮组管理表单的强大之处。如果您有任何疑问，请随时联系Codealphabet。
了解更多
探索 Pluralsight 的这些 React 课程以继续学习：
免责声明：本内容来源于第三方作者授权、网友推荐或互联网整理，旨在为广大用户提供学习与参考之用。所有文本和图片版权归原创网站或作者本人所有，其观点并不代表本站立场。如有任何版权侵犯或转载不当之情况，请与我们取得联系，我们将尽快进行相关处理与修改。感谢您的理解与支持！
请先 登录后发表评论 ~