ReactJS实现表单的单选多选和反选的示例
更新时间：2017年10月13日 09:32:03 作者：misstakau
本篇文章主要介绍了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])
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
在React中,解析HTML标签通常是使用JSX（JavaScript XML）语法的一部分,这篇文章主要介绍了React 用来解析html 标签的方法,本文通过示例代码给大家介绍的非常详细,需要的朋友可以参考下2023-08-08
这篇文章主要介绍了react项目引入antd框架方式以及遇到的一些坑，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-03-03
在React中,通过自定义Hook useTimeHook实现定时器的启动与清除,在App组件中使用Clock组件展示当前时间,利用useEffect钩子在组件挂载时启动定时器,同时确保组件卸载时清除定时器,避免内存泄露,这种方式简化了状态管理和副作用的处理2024-10-10
react的ui库antd中form表单使用SelectTree反显问题及解决
这篇文章主要介绍了react的ui库antd中form表单使用SelectTree反显问题及解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-01-01
这篇文章主要介绍了详解在React中跨组件分发状态的三种方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-08-08
React的调和算法，主要发生在render阶段，调和算法并不是一个特定的算法函数，而是指在调和过程中，为提高构建workInProcess树的性能，以及Dom树更新的性能，而采用的一种策略，又称diffing算法2021-12-12
这篇文章主要介绍了React配置Redux并结合本地存储设置token方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-01-01
本篇文章主要介绍了React组件通信详解，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2021-10-10
ReactNative 之FlatList使用及踩坑封装总结
本篇文章主要介绍了ReactNative 之FlatList使用及踩坑封装总结，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-11-11
这篇文章主要介绍了react+tsx中使用better-scroll,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2022-09-09
最新评论