当前位置:首页 > 日记 > 正文

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

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

本文介绍了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中利用构造器函数模拟类

JavaScript中利用构造器函数模拟类

模拟,构造器,函数,方法,电脑软件,前言本文小编带大家一起学习的是在 JavaScript 中使用构造器函数(construcor function)模拟类。下面话不多说,感兴趣的朋友们下面来一起看看吧。构造器函数简介你可以使用 ES6 的 class 关键字来实现类,不过我…

ps怎么复制图层样式? ps图层复制的

ps怎么复制图层样式? ps图层复制的

图层,方法,两种,样式,电脑软件,ps中制作好的图层样式直接复制到另一个图层中,该怎么复制呢?下面我们就来看看详细的教程。软件名称:Adobe Photoshop 8.0 中文完整绿色破解版软件大小:150.1MB更新时间:2015-11-041、当你在一个图层上添加了图层样…

php 从一个数组中随机的取出若干个

php 从一个数组中随机的取出若干个

若干个,组中,个数,实例,电脑软件,第一种算法,CSDN上别人的想法 $num = 0; $array = array(1, 2, 3, 4, 5, 6, 7, 8, 9); $arr = array(); $g = 5; $tag = true; while ($tag) { $count = count($array); $t = rand(0, 1);…

基于Linux的FTP服务器权限管理

基于Linux的FTP服务器权限管理

权限管理,服务器,电脑软件,Linux,FTP,当我们搭建好一个FTP服务器后,接下去的工作就是要对这个服务器进行权限的管理与设置。因为这项工作直接关系到FTP服务器上文件的安全,关系到FTP服务器运行的稳定。所以,作为企业的网络管理员,不能够忽视这…

WIN2003下Web服务器配置 | 2

WIN2003下Web服务器配置 | 2

服务器配置,电脑软件,Web, 2.实现WAP应用。 WAP是Wireless Application Protocol,即无线应用协议。同时这也是一个开放的全球标准,可以使移动电话和其他无线终端的用户快速安全地获取互联网及企业内部网的信息及其他通信服务。配置…

word怎么删除分页符word删除分页符

word怎么删除分页符word删除分页符

分页,删除,方法,步骤,取消,  word文档编辑中,有时候需要插入分页符,但是发现插入之后,文档分页了,却没有出现分页符,或者是出现的分页符,但是不想要分页符了,想删掉,具体要怎么做呢?下面小编来告诉你word删除分页符的方法步骤吧。word删除分页符…

AngularJS执行流程详解

AngularJS执行流程详解

执行流程,详解,电脑软件,AngularJS,一.启动阶段浏览器解析HTML页面,读取到angular.js的<script>标签后会停止解析后面的DOM节点,开始执行angular.js,与此同时,Angular会设置一个事件监听器来监听DOMContentLoaded事件,当Angular监听到这个事件后…

Win7任务计划在哪

Win7任务计划在哪

任务计划,电脑软件,Win7任务计划是Win7系统的一个小功能,利用Win7任务计划,我们可以创建如:定时关机、定时开启某应用或者程序等等,实用性还是比较强的,不过很多网友只是听过Win7任务计划,但却不知道Win7任务计划在哪,下面本文将针对网友这个问题,…

ai怎么绘制一个可爱的梅花小鹿?

ai怎么绘制一个可爱的梅花小鹿?

绘制,小鹿,可爱,电脑软件,ai,大家知道怎么用ai素材制作之小鹿吗?下面我来教教大家。软件名称:Adobe Illustrator CS6 (AI cs6) 精简绿色中文版(32位+64位)软件大小:205MB更新时间:2014-05-111、打开电脑,接着我们新建一个名字为&ldquo;小鹿&rdqu…

怎么去掉word水印去掉word水印的两

怎么去掉word水印去掉word水印的两

方法,水印,两种,电脑软件,word,  我们在使用word办公软件时,会经常碰到一些word资料文档里面可能会有水印的存在。那么,我们该如何去除这些word水印呢?在下面就由小编给大家分享下的技巧,希望能帮助到您。去掉word水印方法一步骤一:打开要去…

取消Windows 2003关机提示的方法

取消Windows 2003关机提示的方法

提示,方法,取消,电脑软件,Windows,1、编辑组策略打开&ldquo;开始&rdquo;-&ldquo;运行&rdquo;,在&ldquo;打开&rdquo;一栏中输入&ldquo;gpedit.msc&rdquo;命令打开组策略编辑器,依次展开&ldquo;计算机配置&rdquo;&rarr;&ldquo;管理模板&rdquo;&…

在Excel中怎么使用加载宏进行规划

在Excel中怎么使用加载宏进行规划

加载,电脑软件,Excel,  Excel自带了规划求解加载项,使用该加载项可以根据用户设置的规划求解参数和约束条件来自动进行求解。以下是小编为您带来的关于在Excel中使用加载宏进行规划求解,希望对您有所帮助。在Excel中使用加载宏进行规划求解…