本文实例为大家分享了反应实现全选功能的具体代码,供大家参考,具体内容如下
1,主要就是使用状态状态管理
2,jsx写的时候要多留心,返回的时候最好用一个()包着元素部分,不然有可能编译不过。
& lt; !DOCTYPE html>
& lt; html lang=癳n”比;
& lt; head>
& lt;元charset=皍tf - 8”比;
& lt;元name=笆哟啊蹦谌?翱矶?设备宽度,初始=1.0”比;
& lt;元http-equiv=癤-UA-Compatible”内容=癷e=边缘”比;
& lt;脚本src=" https://www.yisu.com/zixun/js/react.development.js "祝辞& lt;/script>
& lt;脚本src=" https://www.yisu.com/zixun/js/react-dom.development.js "祝辞& lt;/script>
& lt;脚本src=" https://www.yisu.com/zixun/js/babel.min.js "祝辞& lt;/script>
& lt; title>全选事件& lt;/title>
& lt;/head>
& lt; body>
& lt; div id="根"祝辞& lt;/div>
& lt;/body>
& lt;脚本类型=拔谋?巴别塔”在
类检查扩展React.Component {
构造函数(){
超级();
this.state={
列表:(
{“价值”:“苹果”,“检查”:假},
{“价值”:“橘子”,“检查”:假},
{“价值”:“凤梨”,“检查”:假},
{“价值”:“菠萝”,“检查”:假},
{“价值”:“无花果”,“检查”:假},
{“价值”:“火龙果”,“检查”:假},
{“价值”:“西瓜”,“检查”:假},
),
isAllChecked:假的,
颜色:红色,
透明度:1
}
}
isAllChecked (e) {
让bool=e.target.checked;
如果(bool) {
this.setState ({
isAllChecked:真
}）
this.state.list.filter((项)=祝辞{
项。检查=true;
}）
其他}{
this.setState ({
isAllChecked:假
}）;
this.state.list.filter((项)=祝辞{
项。检查=false;
}）
}
this.setState ({
列表:this.state.list
}）
}
singleChecked (e, i) {//我就是下标
this.state.list [i.index]。检查=e.target.checked;
this.setState ({
列表:this.state.list
}）;
var bool=this.state.list.filter((项)=祝辞{
返回! item.checked;
}）
如果(保龄球。长度==0){
this.setState ({
isAllChecked:真
}）
其他}{
this.setState ({
isAllChecked:假
}）
}
}
componentDidMount () {
console.log(“挂载完成”);
setInterval()=祝辞{
让opa=this.state.opacity;
opa祝辞=0 & # 63;opa=opa - 0.1: opa=1;
this.setState ({
透明度:opa
}）
},500)
}
呈现(){
回报(
& lt; div风格={{“色”:“红色”,“字形大小”:“20 px”}}祝辞
& lt;头风格={{“不透明度”:this.state.opacity}}在全选练习& lt;/header>
& lt; div风格={{“marginLeft”:“30 px”}}祝辞
全选& lt;输入类型=={this.state检查“复选框”。isAllChecked & # 63;真:假}值=https://www.yisu.com/zixun/{item.value} onChange={(e)=> {this.singleChecked (e,{指数})}}
检查={项目。检查?真:假}/>
)
}）
}
)
}
}
ReactDOM.render (
<检查/>,
. getelementbyid(“根”)
)
& lt;/script>
& lt;/html>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
