React全选功能 React实现全选功能
越来越好。 人气:0想了解React实现全选功能的相关内容吗,越来越好。在本文为您仔细讲解React全选功能的相关知识和一些Code实例,欢迎阅读和指正,我们先划重点: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>
加载全部内容