好资源导航 » 文章资讯 » React实现全选功能

React实现全选功能

2023-07-18 00:53:03 88

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

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










全选事件

classCheckextendsReact.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){ letbool=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 }); varbool=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(()=>{ letopa=this.state.opacity; opa>=0?opa=opa-0.1:opa=1; this.setState({ opacity:opa }) },500) } render(){ return( 全选练习全选{this.isAllChecked(e)}}/>

{ this.state.list.map((item,index)=>{ return( {item.value}{this.singleChecked(e,{index})}} checked={item.checked?true:false}/>

) }) }

) } } ReactDOM.render( , document.getElementById("root") )

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

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

返回顶部
514930285
czq8825@qq.com

React实现全选功能

热门推荐

随机推荐