个人中心
gpt4 book ai didi

React实现全选功能

转载 作者：qq735679552 更新时间：2022-09-29 22:32:09 25 4
gpt4 key购买 nike

CFSDN坚持开源创造价值，我们致力于搭建一个资源共享平台，让每一个IT人在这里找到属于你的精彩世界.

这篇CFSDN的博客文章React实现全选功能由作者收集整理，如果你对这篇文章有兴趣，记得点赞哟.

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

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

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
<!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 >

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

原文链接：https://blog.csdn.net/qq_38880700/article/details/94411903 。

最后此篇关于React实现全选功能的文章就讲到这里了,如果你想了解更多关于React实现全选功能的内容请搜索CFSDN的文章或继续浏览相关文章，希望大家以后支持我的博客！ 。

25 4 0
文章推荐： C++实现LeetCode(86.划分链表)
文章推荐： 再见 Docker如何5分钟转型 containerd
文章推荐： C++实现LeetCode(85.最大矩形)
文章推荐： Docker镜像的导入导出代码实例
qq735679552
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com