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

标题名称：ReactJS怎么实现表单的单选多选和反选
网页链接：https://www.cdcxhl.com/article34/gcdipe.html

成都网站建设公司_创新互联，为您提供微信公众号、网站维护、全网营销推广、网站排名、App开发、网站导航

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联