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 页面执行时间计算代码
Mar 04 Javascript
表单元素的submit()方法和onsubmit事件应用概述
Feb 01 Javascript
js播放wav文件(源码)
Apr 22 Javascript
Javascript实现简单的富文本编辑器附演示
Jun 16 Javascript
jQuery判断一个元素是否可见的方法
Jun 05 Javascript
ThinkJS中如何使用MongoDB的CURD操作
Dec 13 Javascript
Bootstrap3 多选和单选框(checkbox)
Dec 29 Javascript
JS解决position:sticky的兼容性问题的方法
Oct 17 Javascript
JS中的JSON对象的定义和取值实现代码
May 09 Javascript
vue-cli3.0使用及部分配置详解
Aug 29 Javascript
JS添加或删除HTML dom元素的方法实例分析
Mar 05 Javascript
js中值引用和地址引用实例分析
Jun 21 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
PHP实现多维数组转字符串和多维数组转一维数组的方法
2015/08/08 PHP
PHP实现的mysql主从数据库状态检测功能示例
2017/07/20 PHP
php+Ajax无刷新验证用户名操作实例详解
2019/03/04 PHP
javascript 事件处理程序介绍
2012/06/27 Javascript
JQuery+DIV自定义滚动条样式的具体实现
2013/06/25 Javascript
JavaScript如何从listbox里同时删除多个项目
2013/10/12 Javascript
javascript怎么禁用浏览器后退按钮
2014/03/27 Javascript
jQuery获取attr()与prop()属性值的方法及区别介绍
2016/07/06 Javascript
Js遍历键值对形式对象或Map形式的方法
2016/08/08 Javascript
AngularJS 指令的交互详解及实例代码
2016/09/14 Javascript
百度多文件异步上传控件webuploader基本用法解析
2016/11/07 Javascript
IE8兼容Jquery.validate.js的问题
2016/12/01 Javascript
PHP获取当前页面完整URL的方法
2016/12/02 Javascript
jQuery中的一些小技巧
2017/01/18 Javascript
ES6学习笔记之Set和Map数据结构详解
2017/04/07 Javascript
js中字符型和数值型数字的互相转化方法(必看)
2017/04/25 Javascript
Vue 自定义动态组件实例详解
2018/03/28 Javascript
vue的style绑定background-image的方式和其他变量数据的区别详解
2018/09/03 Javascript
node.js监听文件变化的实现方法
2019/04/17 Javascript
[34:27]DOTA2上海特级锦标赛B组败者赛 VG VS Spirit第一局
2016/02/26 DOTA
Python验证码识别处理实例
2015/12/28 Python
利用Python命令行传递实例化对象的方法
2016/11/02 Python
Python实现读取TXT文件数据并存进内置数据库SQLite3的方法
2017/08/08 Python
python读文件保存到字典,修改字典并写入新文件的实例
2018/04/23 Python
python-tkinter之按钮的使用,开关方法
2019/06/11 Python
Python爬取破解无线网络wifi密码过程解析
2019/09/17 Python
python进行OpenCV实战之画图(直线、矩形、圆形)
2020/08/27 Python
Python 内存管理机制全面分析
2021/01/16 Python
HTML5的结构和语义(1):前言
2008/10/17 HTML / CSS
利用HTML5中的Canvas绘制一张笑脸的教程
2015/05/07 HTML / CSS
Canvas实现贝赛尔曲线轨迹动画的示例代码
2019/04/25 HTML / CSS
小学生教师节演讲稿
2014/09/03 职场文书
个人租房协议书样本
2014/10/01 职场文书
加强作风建设演讲稿
2014/10/24 职场文书
2014年绩效考核工作总结
2014/12/11 职场文书
收入证明申请书
2015/06/12 职场文书