ReactJS怎么实现表单的单选多选和反选-创新互联

小编给大家分享一下ReactJS怎么实现表单的单选多选和反选，希望大家阅读完这篇文章之后都有所收获，下面让我们一起去探讨吧！

JS是什么

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怎么实现表单的单选多选和反选”有了一定的了解，如果想了解更多相关知识，欢迎关注创新互联成都网站设计公司行业资讯频道，感谢各位的阅读！

另外有需要云服务器可以了解下创新互联scvps.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。