最近学习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>
相关推荐
总之，“react-component-starter-master”提供了React组件开发所需的基本结构和工具，简化了开发流程，使开发者可以专注于编写高质量的React组件，而无需关心底层配置。无论你是初学者还是经验丰富的开发者，这个...
在React开发中，CSS选择器是用于特定于组件的样式化的一种强大工具。React组件的样式管理是一个关键的方面，因为它影响着应用的可维护性和性能。本篇将深入探讨React组件与CSS选择器的结合使用，以及如何优化组件的...
在现代Web开发中，React作为一个强大的JavaScript库，已经成为构建用户...在实际开发过程中，不断优化组件设计，选择合适的状态管理和通信策略，以及充分利用React生态系统中的工具，都是提升微服务应用质量的关键。
在React.js开发中，"react级联选择器/支持多选/单选"是一个常见的组件需求，用于构建具有层级关系的数据选择功能。这种组件通常被用在如地区选择、组织结构选择等场景，用户可以逐级展开选项，进行单选或多选操作。...
react组件的ppt，格式为key，组件的概念，定义，创建方法
React-CompositorKit是一款专为React组件库开发、文档化和测试而设计的强大工具。它旨在简化组件开发流程，提供高效的工作环境，并确保组件的质量。React作为一种流行的JavaScript库，广泛用于构建用户界面，而...
2. **编写React组件**：创建React组件，这些组件应该包含你希望在Sketch中展示的元素和样式。使用CSS-in-JS库（如styled-components）可以使样式更容易被导入Sketch。 3. **使用Sketch API**：`react-sketchapp`库...
在“react-用于messenger客户聊天插件的React组件”这个项目中，我们将探讨如何利用React来创建一个与Facebook Messenger集成的聊天插件。 首先，React组件是React的核心概念。它们是可重用的代码块，能够封装独立...
2. **创建React组件**：使用RxJS编写React组件通常涉及创建一个RxJS Observable来监听事件或数据变化，然后在Observable的订阅中更新组件的状态。例如，可以使用`fromEvent`函数监听DOM事件，然后通过`setState`更新...
React组件的生命周期
本文通过实际项目案例，深入探讨了编写React组件的最佳实践，包括基于类的组件、状态初始化、propTypes和defaultProps的使用，以及方法定义等方面。以下是对这些知识点的详细说明： 1. **基于类的组件**： React...
在IT行业中，跨框架开发是常见的需求之一，例如将已有的React组件转换为Vue组件。React和Vue都是流行的JavaScript库，它们各自具有独特的设计哲学和API。本篇将详细讲解如何进行这种转换，并探讨两者之间的差异，...
斯特鲁特（Structor）旨在通过其直观的界面，帮助开发者快速创建和配置React组件，无需编写大量的初始代码。这大大简化了UI开发流程，尤其适合于快速原型设计和团队协作。 斯特鲁特的核心功能包括： 1. **组件构建...
react-qmap：一个对腾讯web地图简单封装的React组件
在给定的标题“React-一个Treeview UI编写作为一个React组件包含material design”中，我们可以了解到这是一个使用React和Material Design库创建的Treeview组件。Material Design是一种流行的UI设计规范，它提供了...
这个“react-一个可以把文本中多个关键字高亮显示的react组件”就是为了满足这样的需求而设计的。这个组件可以帮助开发者轻松地实现关键词高亮功能，提升用户在浏览和搜索文本时的体验。 首先，让我们了解React组件...
例如，我们可以使用`styled-components`库，它允许我们用JSX语法编写样式，并将它们与组件直接关联： ```jsx import styled from 'styled-components'; const Button = styled.button` background-color: blue; ...
通过分析这个项目，我们可以学习到如何将上述理论应用到实际代码中，包括组件的结构设计、事件处理函数的编写、状态的更新逻辑等。 总结来说，创建React的拖动排序组件需要对React的基础有深入理解，包括事件处理、...
2. **创建抽象组件**：根据识别出的共性，编写高阶组件、Render Props组件或利用Context API创建状态管理器。 3. **复用组件**：在新的组件中通过props调用这些抽象组件，或者直接导入和使用它们。 4. **持续优化*...
1. **React Hooks**：React 16.8引入了Hooks，如`useState`和`useEffect`，它们允许在不编写类组件的情况下管理状态和副作用。在日期选择器中，我们可以使用`useState`来存储当前选中的日期，而`useEffect`则可以...