React实现全选功能

本文实例为大家分享了React实现全选功能的具体代码，供大家参考，具体内容如下

1、主要就是使用state状态管理
2、jsx写的时候要多留心，return 的时候最好用一个()包着元素部分，不然有可能编译不过。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <script src="./js/react.development.js"></script>
  <script src="./js/react-dom.development.js"></script>
  <script src="./js/babel.min.js"></script>
  <title>全选事件</title>
</head>
<body>
  <div id="root"></div>
</body>

<script type="text/babel">
  class Check extends React.Component{
    constructor() {
      super();
      this.state={
        list:[
          {'value':'苹果','checked':false},
          {'value':'橘子','checked':false},
          {'value':'凤梨','checked':false},
          {'value':'菠萝','checked':false},
          {'value':'无花果','checked':false},
          {'value':'火龙果','checked':false},
          {'value':'西瓜','checked':false},
        ],
        isAllChecked:false,
        color:'red',
        opacity:1
      }
    }
    isAllChecked(e){
      let bool = e.target.checked;
      if(bool){
        this.setState({
          isAllChecked : true
        })
        this.state.list.filter((item)=>{
          item.checked = true;
        })
      }else{
        this.setState({
          isAllChecked : false
        });
        this.state.list.filter((item)=>{
          item.checked = false;
        })
      }
      this.setState({
        list:this.state.list
      })
    }
    singleChecked(e,i){
      // i 就是下标
      this.state.list[i.index].checked = e.target.checked;
      this.setState({
        list:this.state.list
      });
      var bool=this.state.list.filter((item)=>{
        return !item.checked;
      })
      if(bool.length == 0){
        this.setState({
          isAllChecked : true
        })
      }else{
        this.setState({
          isAllChecked : false
        })
      }
    }
    componentDidMount(){
      console.log("挂载完成");
      setInterval(()=>{
        let opa = this.state.opacity;
        opa >=0 ? opa=opa-0.1 : opa=1;
        this.setState({
          opacity:opa
        })
      },500)
    }
    render(){
      return(
        <div style={{'color':'red','fontSize':'20px'}}>
          <header style={{'opacity':this.state.opacity}}>全选练习</header>
          <div style={{'marginLeft':'30px'}}>
            全选 <input type="checkbox" checked={this.state.isAllChecked ? true : false} onChange={(e)=>{this.isAllChecked(e)}} /><br/><br/>
            {
              this.state.list.map((item,index)=>{
                return (
                  <div key={index}>
                   {item.value} <input type="checkbox"  value={item.value} onChange={(e)=>{this.singleChecked(e,{index})}}
                   checked={item.checked ? true : false} />
                  </div>
                )
              })
            }
          </div>
        </div>
      )
    }
  }
  ReactDOM.render(
    <Check />,
    document.getElementById("root")
  )

</script>
</html>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • react实现复选框全选和反选组件效果

    本文实例为大家分享了react实现复选框全选和反选组件的具体代码,供大家参考,具体内容如下 运行效果图如下: 代码: import React, { Component } from 'react'; import { withRouter } from 'react-router-dom'; // import Menu from '../menu/Menu.jsx'; class List extends Component { constructor () { super(); this.

  • React实现全选功能

    本文实例为大家分享了React实现全选功能的具体代码,供大家参考,具体内容如下 1.主要就是使用state状态管理 2.jsx写的时候要多留心,return 的时候最好用一个()包着元素部分,不然有可能编译不过. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" conten

  • ant design的table组件实现全选功能以及自定义分页

    我就废话不多说了,大家还是直接看代码吧~ ant design的table组件实现全选功能以及自定义分页 直接附上全部代码以及截图了 import './index.scss'; import React from 'react'; import {Checkbox, Table, Popconfirm} from 'antd'; class TestComponent extends Component { constructor (props) { super(props); this.st

  • React鼠标多选功能的配置方法

    一般列表都有选择功能,单选复选多选都很常见.在自定义循环的列表,图像中,实现鼠标单选,多选,反选功能. # React mousemultiples # React 鼠标多选组件 React 鼠标多选组件 局限性 > 主要实现鼠标多选的效果, 在不破坏原有的列表情况下,嵌入组件拥有鼠标多选功能. npm包地址 [链接](https://www.npmjs.com/package/mousemultiples) 安装 npm i mousemultiples 使用配置项 /**  * wrappe

  • iOS开发之TextField禁用粘贴、选择和全选功能

    众所周知,TextField默认情况下,双击会出现"Paste"等提示复制粘贴的快捷菜单,方便用户快速编辑文本,但很多情况下,我们并不希望用户能够粘贴文本[虽然这样不友好,但万一产品经理要这么实现呢?],那么我们可以这样做: 方法 自定义TextField 重写canPerformAction方法 class CustomTextField: UITextField { /// 是否只是用于显示(禁用粘贴.选择和全选功能) var displayOnly = false /// 禁用粘

  • jquery写个checkbox——类似邮箱全选功能

    以前用原生 JS 写过 checkbox--类似邮箱全选功能,点击这里.最近在学习jquery,今天抽空用jquery 写个checkbox--类似邮箱全选功能. 复制代码 代码如下: <!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8"> <title>checkbox</title> </head> &l

  • jQuery实现列表的全选功能

    只需要几行代码就可以实现列表的全选功能,并且可以配合post请求执行后台的删除程序 js 复制代码 代码如下: function DelAlert(data)     {         if(data == 'error')         {             alert("错误-");         }         else if(data == 'success')         {             alert("成功-");     

  • AngularJS 购物车全选/取消全选功能的实现方法

    AngularJS 购物车全选/取消全选功能的实现方法

    刚学习angularJS,于是练习写了一个类似于购物车的全选/取消全选的功能,主要实现的功能有: 1.勾选全选checkbox,列表数据全部被勾选,取消同理,用ng-model实现双向绑定: 2.选中列表中的所有checkbox,全选也会被勾选:(这里我想到的方法是给每一个对象增加checked字段,然后勾选触发echoChange()函数,用了一个cc变量计算当前checked为true的个数,然后再判断被勾选个数与数组长度是否相等,相等则证明全部被勾选,于是全选按钮也赋值为true;不知道还

  • 基于JS实现checkbox全选功能实例代码

    基于JS实现checkbox全选功能实例代码

    需求:要求实现点击全选选中所有菜单,再次点击全选取消选中.此功能经常会用户,下面小编给大家分享下实现代码,一起看看吧! 效果图如下: 点击全选之前: 点击全选之后: 再次点击全选之后: 代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> &l

  • .net开发中批量删除记录时实现全选功能的具体方法

    1 . JS实现全选 往页面上拖一个GridView,设置好数据源,并为GridView添加一个模板列,往模板列里添加一个chekcbox,比如下面的代码 复制代码 代码如下: <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" DataKeyNames="ProductID"    DataSourceID="SqlD

  • JS中如何实现复选框全选功能

    js实现复选框全选功能,代码如下所示: <? include_once("inc/auth.inc.php"); include_once("inc/utility_all.php"); include_once("inc/utility_org.php"); $connstatus = ($connstatus) ? true : false; if(!isset($TYPE)) $TYPE="0"; $ITEMS_I

随机推荐