ReactJS实现表单的单选多选和反选的示例


Posted in Javascript onOctober 13, 2017

本文介绍了ReactJS实现表单的单选多选和反选的示例,分享给大家,希望对大家有所帮助。
需求是对列表实现单选,反选和多选,全部清除的操作

...... 
 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])

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
一段批量给页面上的控件赋值js
Jun 19 Javascript
JQuery验证工具类搜集整理
Jan 16 Javascript
jquery 快速回到页首的方法
Dec 05 Javascript
JavaScript判断textarea值是否为空并给出相应提示
Sep 04 Javascript
jQuery中removeAttr()方法用法实例
Jan 05 Javascript
浅谈JavaScript数据类型
Mar 03 Javascript
jQuery实现根据滚动条位置加载相应内容功能
Jul 18 Javascript
AngularJS基础 ng-paste 指令简单示例
Aug 02 Javascript
AngularJS 中的数据源的循环输出
Oct 12 Javascript
layui 监听表格复选框选中值的方法
Aug 15 Javascript
小程序实现授权登陆的解决方案
Dec 02 Javascript
微信小程序绘制图片发送朋友圈
Jul 25 Javascript
Angular.js通过自定义指令directive实现滑块滑动效果
Oct 13 #Javascript
捕获未处理的Promise错误方法
Oct 13 #Javascript
解决ie img标签内存泄漏的问题
Oct 13 #Javascript
jq源码解析之绑在$,jQuery上面的方法(实例讲解)
Oct 13 #jQuery
vue2组件之select2调用的示例代码
Oct 12 #Javascript
vue2.x select2 指令封装详解
Oct 12 #Javascript
一个简易时钟效果js实现代码
Mar 25 #Javascript
You might like
数据库的日期格式转换
2006/10/09 PHP
PHP 简单数组排序实现代码
2009/08/05 PHP
php中多维数组按指定value排序的实现代码
2014/08/19 PHP
PHP5.0 TIDY_PARSE_FILE缓冲区溢出漏洞的解决方案
2018/10/14 PHP
php利用array_search与array_column实现二维数组查找
2019/07/08 PHP
use jscript Create a SQL Server database
2007/06/16 Javascript
自己的js工具 Event封装
2009/08/21 Javascript
基于jquery的一个拖拽到指定区域内的效果
2011/09/21 Javascript
nodejs 整合kindEditor实现图片上传
2015/02/03 NodeJs
Angular ng-repeat遍历渲染完页面后执行其他操作详细介绍
2016/12/13 Javascript
JavaScript实现左右下拉框动态增删示例
2017/03/09 Javascript
jQuery 循环遍历改变a标签的href(实例讲解)
2017/07/12 jQuery
vue 监听键盘回车事件详解 @keyup.enter || @keyup.enter.native
2018/08/25 Javascript
element-ui 本地化使用教程详解
2019/10/28 Javascript
javascript History对象原理解析
2020/02/17 Javascript
JavaScript 面向对象程序设计详解【类的创建、实例对象、构造函数、原型等】
2020/05/12 Javascript
JS如何监听div的resize事件详解
2020/12/03 Javascript
pycharm 使用心得(三)Hello world!
2014/06/05 Python
python使用clear方法清除字典内全部数据实例
2015/07/11 Python
python+Splinter实现12306抢票功能
2018/09/25 Python
Python 控制终端输出文字的实例
2019/07/12 Python
Python之虚拟环境virtualenv,pipreqs生成项目依赖第三方包的方法
2019/07/23 Python
kafka监控获取指定topic的消息总量示例
2019/12/23 Python
PyTorch中的padding(边缘填充)操作方式
2020/01/03 Python
用canvas实现图片滤镜效果附演示
2013/11/05 HTML / CSS
Canvas实现放大镜效果完整案例分析(附代码)
2020/11/26 HTML / CSS
德国PC硬件网站:CASEKING
2016/10/20 全球购物
意大利领先的线上奢侈品销售电商:Eleonora Bonucci
2017/10/17 全球购物
岗位职责定义及内容
2013/11/08 职场文书
秋天的怀念教学反思
2014/04/28 职场文书
护士感人事迹
2014/05/01 职场文书
共产党员岗位承诺书
2014/05/29 职场文书
作风建设年度心得体会
2014/10/29 职场文书
民政工作个人总结
2015/02/28 职场文书
劳动合同变更协议书范本
2019/04/18 职场文书
JavaScript中关于预编译、作用域链和闭包的理解
2021/03/31 Javascript