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])

登录后复制

相信看了本文案例你已经掌握了方法,更多精彩请关注【创想鸟】其它相关文章!

推荐阅读:

用AngualrJs使用定时器

axios处理http发送Post和get

以上就是ReactJS操作表单选择的详细内容,更多请关注【创想鸟】其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至253000106@qq.com举报,一经查实,本站将立刻删除。

发布者:PHP中文网,转转请注明出处:https://www.chuangxiangniao.com/p/2771286.html

(0)
上一篇 2025年3月8日 12:53:15
下一篇 2025年3月8日 12:53:23

AD推荐 黄金广告位招租... 更多推荐

相关推荐

  • js实现简易24小时时钟

    这次给大家带来js实现简易24小时时钟,js实现简易24小时时钟的注意事项有哪些,下面就是实战案例,一起来看一下。 js代码 var canvas = document.getElementById(“clock”);var clock =…

    编程技术 2025年3月8日
    200
  • JS自定义状态栏动画文字

    这次给大家带来JS自定义状态栏动画文字,JS自定义状态栏动画文字的注意事项有哪些,下面就是实战案例,一起来看一下。 在IE浏览器中打开,显示动态文字的效果,主要浏览器左下角的文字。 var statusText=”自定义动画状态栏文字”; …

    编程技术 2025年3月8日
    200
  • AngularJS数据源怎样循环输出

    这次给大家带来AngularJS数据源怎样循环输出,AngularJS数据源循环输出的注意事项有哪些,下面就是实战案例,一起来看一下。 AngularJS 中的数据源的循环输出 最近也是刚刚接触angular前端框架的,但使用的几天就感觉效…

    编程技术 2025年3月8日
    200
  • BootStrap+Validator在JS中操作校验功能

    这次给大家带来BootStrap+Validator在JS中操作校验功能,BootStrap+Validator在JS中操作校验功能的注意事项有哪些,下面就是实战案例,一起来看一下。 这是开始的校验代码  function initVali…

    编程技术 2025年3月8日
    200
  • angularJS+Ionic实现移动端图片上传功能

    这次给大家带来angularJS+Ionic实现移动端图片上传功能,angularJS+Ionic实现移动端图片上传功能的注意事项有哪些,下面就是实战案例,一起来看一下。 前端开发中经常会碰到图片上传的问题,网上的解决办法很多,可是有些图片…

    编程技术 2025年3月8日
    200
  • js实现滚动title步奏详解

    这次给大家带来js实现滚动title步奏详解,js实现滚动title的注意事项有哪些,下面就是实战案例,一起来看一下。 *{ margin:0; padding:0; font-family:’微软雅黑’; } img{ float:lef…

    编程技术 2025年3月8日
    200
  • js怎么给输入框增加动画效果

    这次给大家带来js怎么给输入框增加动画效果,js给输入框增加动画效果的注意事项有哪些,下面就是实战案例,一起来看一下。 (function() { function p() { window.requestAnimFrame(p), a =…

    编程技术 2025年3月8日
    200
  • js与服务器时间同步的步奏详解

    这次给大家带来js与服务器时间同步的步奏详解,js与服务器时间同步的注意事项有哪些,下面就是实战案例,一起来看一下。 方案1:每次倒计时去服务端请求时间 //开启定时器var timer = setInterval(function () …

    编程技术 2025年3月8日
    200
  • 用js操作iframe改变界面高度

    这次给大家带来用js操作iframe改变界面高度,用js操作iframe改变界面高度的注意事项有哪些,下面就是实战案例,一起来看一下。 // contentWindow所有浏览器支持,contentDocument IE不支持; windo…

    编程技术 2025年3月8日
    200
  • ParticlesJS的使用详解

    这次给大家带来ParticlesJS的使用详解,ParticlesJS使用的注意事项有哪些,下面就是实战案例,一起来看一下。 particles.js A lightweight JavaScript library for creatin…

    编程技术 2025年3月8日
    200

发表回复

登录后才能评论