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项目实践之webpack-dev-serve,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-09-09
错误边界是一种React组件,这种组件可以捕获发生在其子组件树任何位置的JavaScript错误,并打印这些错误,同时展示降级UI,而并不会渲染那些发生崩溃的子组件树2023-01-01
Hook是 React 16.8 的新增特性，它可以让你在不编写class的情况下使用state以及其他的React特性，这篇文章主要介绍了react中Hooks的理解和用法,需要的朋友可以参考下2023-05-05
react 路由权限动态菜单方案配置react-router-auth-plus
这篇文章主要为大家介绍了react路由权限动态菜单方案react-router-auth-plus傻瓜式配置详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-08-08
这篇文章主要介绍了React自定义视频全屏按钮实现全屏功能，通过绘制全屏按钮，并绑定点击事件，编写点击事件，通过实例代码给大家详细讲解,需要的朋友可以参考下2022-11-11
create-react-app使用antd按需加载的样式无效问题的解决
这篇文章主要介绍了create-react-app使用antd按需加载的样式无效问题的解决，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2019-02-02
这篇文章主要介绍了React Native采用Hermes热更新打包实战,在传统的热更新方案中，我们实现热更新需要借助code-push开源方案，包括热更新包的发布两种方式详解，感兴趣的朋友一起看看吧2022-05-05
这篇文章主要介绍了React中设置样式style方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-11-11
React之错误边界 Error Boundaries示例详解
这篇文章主要为大家介绍了React之错误边界Error Boundaries示例教程，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-10-10
这篇文章主要介绍了React八大常见错误及其解决方案,并通过代码示例介绍的非常详细,对大家学习react有一定的帮助,感兴趣的朋友可以参考下2024-03-03
最新评论