本文实例为大家分享了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
