最近学习react，写了一个类目选择组件练练手。
注：1.this.state 和 this.setState的区别是前者改变状态值不引发render行为，后者相反。
2.父组件传值到自组件，子组件用props属性接收，props可以是父组件函数，经过子组件调用改变父组件状态
3.componetWillReceiveProps: 此生命周期发生在父组件props值改变，子组件可以在此时根据props改变组件内部state状态，this.props获得之前的状态，nextProps获得新的props
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Basic Example</title>
<script src="js/react.js"></script>
<script src="js/react-dom.js"></script>
<script src="js/browser.min.js"></script>
<script src="js/jquery-1.7.2.min.js"></script>
</head>
<body>
<div id="GoodsClassify"></div>
<div id="show"></div>
<script type="text/babel">
var data=[{type:'衣服类',items:['衣服一','衣服二','衣服三']},{type:'电器类',items:['电器一','电器二','电器三']}];
var GoodsDl=React.createClass({
getInitialState:function(){
return {
check:false, //父的选中状态
childCheckboxNum:0,//父checkbox下子checkbox的数量
childBeChecked:0, //子checkbox被选中的数量
ifuncheckall:true //childCheckboxNum==childBeChecked时 为true，表示父checkbox取消选择时可以取消所有子checkbox
} //父被取消另一种场景是子全选中时，取消某个子checkbox，父被取消，但其他子不必取消，此时为false
},
selectAll:function() {
this.state.check=!this.state.check;
this.setState({
check:this.state.check
})
if(this.state.check){
this.state.childBeChecked=this.state.childCheckboxNum;
this.state.ifuncheckall=true
}else{
this.state.childBeChecked=0;
}
},
childAffectFather:function(flag){
if(!flag){ //子未被选中
this.setState({
check:false,//父取消选中
ifuncheckall:false// 父被动取消选中，其他子不被取消
})
this.state.childBeChecked-=1;
}else{
this.state.childBeChecked+=1;
if(this.state.childBeChecked==this.state.childCheckboxNum){
this.selectAll();
}
}
},
render:function(){
var o=this.props.obj;
var dlindex=this.props.dlindex;
this.state.childCheckboxNum=o.items.length;
var dd=o.items.map(function(i,ddindex){
return(
<dd key={'dd_'+dlindex+'_'+ddindex}>
<GoodsCheckbox dlcheck={this.state.check} ifuncheckall={this.state.ifuncheckall} childAffectFather={this.childAffectFather} />{i}
</dd>
)
}.bind(this));
return (
<dl>
<dt><input onChange={this.selectAll} type="checkbox" checked={this.state.check}/>{o.type}</dt>
{dd}
</dl>
)
}
});
var GoodsCheckbox=React.createClass({
getInitialState:function(){
return {
check:false
}
},
componentWillReceiveProps:function(nextProps){
if(nextProps.dlcheck){
this.setState({
check:true
})
}
else{
if(nextProps.ifuncheckall){
this.setState({
check:false
})
}
}
},
selectOne:function() {
this.state.check=!this.state.check;
this.setState({
check:this.state.check
})
this.props.childAffectFather(this.state.check);
},
render:function(){
return <input onChange={this.selectOne} type="checkbox" checked={this.state.check}/>
}
});
var GoodsClassify=React.createClass({
render:function(){
var data=this.props.list;
var list=data.map(function(o,dlindex){
return <GoodsDl key={dlindex} obj={o} dlindex={dlindex} />
});
return <div>{list}</div>
}
});
ReactDOM.render(
<GoodsClassify list={data}/>,
document.getElementById('GoodsClassify')
);
</script>
</body>
</html>
相关推荐
例如，如果你正在编写一个自定义组件，需要根据组件的状态动态调整其样式，`strclass` 就可以派上用场。 通过`strclass-master` 压缩包，我们可以看到库的源代码、示例和可能的文档。研究这些内容可以帮助我们更...
该资源为joblib-1.1.0-py2.py3-none-any.whl，欢迎下载使用哦！
内容概要：本文详细介绍了如何使用MATLAB/Simulink R2015b搭建Buck-Boost变换器的开环和闭环控制仿真模型。首先，作者解释了Buck-Boost变换器的基本构成及其在电源设计中的重要性。接着，逐步指导读者构建开环模型，包括设置关键参数如PWM频率、占空比、输入电压等，并展示了开环控制下的输出特性。随后，引入了PID控制器进行闭环控制，强调了PID参数的选择与调整方法，以及如何通过增加电压采样和误差比较来提高系统的稳定性。此外，还分享了一些常见的仿真错误及解决方案，如电感值选取不当、二极管模型过于理想等问题。最后，提供了几个有趣的实验案例，如动态改变占空比、突变负载等，以展示闭环控制的优势。 适合人群：具有一定电力电子和MATLAB/Simulink基础的技术人员或学生。 使用场景及目标：适用于希望深入理解Buck-Boost变换器工作原理及其控制策略的研究者和技术爱好者。通过动手实践，掌握开环与闭环控制的区别，学会优化PID参数，提升电源设计能力。 其他说明：文中附有多处代码片段和实用技巧，有助于读者更好地理解和应用所学知识。同时提醒读者注意不同MATLAB版本间的兼容性问题。
2023年上海市高等学校计算机等级考试.docx
能检测死锁，输出相关代码便于排查
电子商务物流业务管理教材.pptx
基于stm32的控制底层
2023年全国计算机等级考试三级数据库试题.doc
2023年计算机二级考试操作题真题.doc
2023年自考管理系统中计算机应用试题及答案.doc
资源内项目源码是来自个人的毕业设计，代码都测试ok，包含源码、数据集、可视化页面和部署说明，可产生核心指标曲线图、混淆矩阵、F1分数曲线、精确率-召回率曲线、验证集预测结果、标签分布图。都是运行成功后才上传资源，毕设答辩评审绝对信服的保底85分以上，放心下载使用，拿来就能用。包含源码、数据集、可视化页面和部署说明一站式服务，拿来就能用的绝对好资源！！！ 项目备注 1、该资源内项目代码都经过测试运行成功，功能ok的情况下才上传的，请放心下载使用！ 2、本项目适合计算机相关专业(如计科、人工智能、通信工程、自动化、电子信息等)的在校学生、老师或者企业员工下载学习，也适合小白学习进阶，当然也可作为毕设项目、课程设计、大作业、项目初期立项演示等。 3、如果基础还行，也可在此代码基础上进行修改，以实现其他功能，也可用于毕设、课设、作业等。 下载后请首先打开README.txt文件，仅供学习参考, 切勿用于商业用途。
2023年电子科技秋网与网站设计在线作业.doc
内容概要：本文详细介绍了基于脉振高频电压注入的无速度传感器控制系统。该方法通过向电机定子绕组注入高频电压信号（如2kHz），利用高频响应电流中的转子位置信息进行实时定位。文中展示了具体的代码实现，包括信号注入、带通滤波、正交锁相环以及位置跟踪观测器的设计。此外，讨论了参数整定、抗干扰措施（如伪随机频移键控）和实际调试过程中遇到的问题及其解决方案。该方法适用于低速或零速情况，能够显著提高位置估计的准确性。 适合人群：从事电机控制、自动化控制领域的工程师和技术研究人员。 使用场景及目标：①用于工业伺服系统中，特别是那些对成本敏感或安装空间有限的应用；②解决传统方法在低速或零速情况下无法准确估计转子位置的问题；③提供一种可靠的无速度传感器控制方案，减少硬件成本和维护难度。 其他说明：该方法虽然在低速时表现出色，但在高速时精度有所下降，可以通过混合观测策略进行优化。同时，实际应用中需要注意高频信号带来的额外损耗和参数敏感性问题。
2023年计算机二级基础知识重点总结.docx
该资源为joblib-1.1.0.tar.gz，欢迎下载使用哦！
An-225大型运输机实体装配模型由225个实体零件基元组成，分为21个子装配模块。 该模型是通过缩放一个基本的8.5英寸x11英寸三视图原理图而开发的。 因此，其精度有所降低。
matlab
2024年大数据软件项目深度研究分析报告.docx
2023年四川省一级计算机等级考试训练题.doc
矢量边界，行政区域边界，精确到乡镇街道，可直接导入arcgis使用