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怎么实现表单的单选多选和反选
网站网址:http://pwwzsj.com/article/gcdipe.html