小编给大家分享一下ReactJS怎么实现表单的单选多选和反选，希望大家阅读完这篇文章之后都有所收获，下面让我们一起去探讨吧！
创新互联公司坚持“要么做到，要么别承诺”的工作理念，服务领域包括：成都网站设计、成都做网站、企业官网、英文网站、手机端网站、网站推广等服务，满足客户于互联网时代的铅山网站设计、移动媒体设计的需求，帮助企业找到有效的互联网解决方案。努力成为您成熟可靠的网络建设合作伙伴！
JS是JavaScript的简称，它是一种直译式的脚本语言，其解释器被称为JavaScript引擎，是浏览器的一部分，主要用于web的开发，可以给网站添加各种各样的动态效果，让网页更加美观。
需求是对列表实现单选，反选和多选，全部清除的操作
......
this.state = {
//初始化空数组，表示已经选择的
selectedStores:[],
}
......
handleClick(e){
const newSelection = e.target.value;//拿到点击的具体一项
let newSelectionArray;//新建一个空数组
//判断点击项是否为选择状态，是的话清除选中状态
if(this.state.selectedStores.indexOf(newSelection) > -1) {
newSelectionArray =
this.state.selectedStores.filter((s:any) => s !== newSelection)
} else {
//不是的话就加入新选择数组
newSelectionArray =
[...this.state.selectedStores, newSelection];
}
this.setState({
// 新选择数组统一改为选中状态
selectedStores: newSelectionArray
});
}Array.prototype.indexOf()方法返回在数组中可以找到一个给定元素的第一个索引，如果不存在，则返回-1。
语法：
arr.indexOf(searchElement) arr.indexOf(searchElement[, fromIndex = 0])
Array.prototype.filter()方法创建一个新数组, 其包含通过所提供函数实现的测试的所有元素。
语法：
var new_array = arr.filter(callback[, thisArg])
看完了这篇文章，相信你对“ReactJS怎么实现表单的单选多选和反选”有了一定的了解，如果想了解更多相关知识，欢迎关注创新互联行业资讯频道，感谢各位的阅读！