ReactJS实现表单的单选多选和反选的示例
时间:2019-04-07
本文章向大家介绍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])
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
- 图形化的2008R2 Server Core 配置管理工具
- 各种浏览器的userAgent
- WordPress 根据浏览器 user-agent 按需加载CSS 文件
- memcached的最新状态
- [程序设计语言]-01:引言
- ASP.NET Ajax 库
- ASP.NET进程优化
- 多说 提速:js内页页脚加载、静态文件CDN
- 微信小程序的王者时代
- [程序设计语言]-[核心概念]-02:名字、作用域和约束(Bindings)
- NUMA架构
- 如何处理 Python 入门难以进步的现象?
- 编写前置和后置条件的连贯接口库:CuttingEdge.Conditions
- [程序设计语言]-[核心概念]-03:控制流
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- redis实战第十二篇 redis cluster请求重定向
- 行为型设计模式:责任链模式以及mybatis中的责任链
- java中BigDecimal使用和注意事项
- redis实战第十一篇 redis cluster添加密码
- Linux下docker制作springboot应用镜像
- 行为型设计模式:备忘录模式
- 行为型设计模式:访问者模式
- redis实战第十篇 集群收缩
- redis实战第九篇 集群扩容自动迁移槽(redis-cli)
- 自动化运维| Ansible playbook的逻辑控制语句
- Windows通用应用平台UWP持久化
- redis实战第八篇 集群扩容 手动迁移槽
- Xinetd服务的安装与配置详解
- redis实战第七篇 使用redis工具(redis-cli)搭建redis cluster
- 使用ROS2机器人操作系统进行多机器人编程技术实践(Multi-Robot Programming Via ROS2 )