最近学习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库,广泛用于构建用户界面,而...
在“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-bash组件详解** React-bash是一款专为React开发者设计的开源组件,它允许你在React应用中嵌入一个可配置且可扩展的Bash终端模拟器。这个组件旨在为用户提供一种直观、交互式的终端体验,使用户能够在前端...
通过分析这个项目,我们可以学习到如何将上述理论应用到实际代码中,包括组件的结构设计、事件处理函数的编写、状态的更新逻辑等。 总结来说,创建React的拖动排序组件需要对React的基础有深入理解,包括事件处理、...
1. **灵活性**:react-watermark-module 支持两种类型的水印,即图片水印和文字水印,这为开发者提供了丰富的选择,可以根据需求自由定制。 2. **易于配置**:该组件提供了一系列可配置的参数,如水印位置、角度、...
2. **创建抽象组件**:根据识别出的共性,编写高阶组件、Render Props组件或利用Context API创建状态管理器。 3. **复用组件**:在新的组件中通过props调用这些抽象组件,或者直接导入和使用它们。 4. **持续优化*...