`
癫觉士
  • 浏览: 19501 次
  • 性别: Icon_minigender_1
  • 来自: 南京
社区版块
存档分类
最新评论

React 组件编写之 类目选择

阅读更多

    最近学习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-React组件脚手架可以调试打包发布单个React组件

    总之,“react-component-starter-master”提供了React组件开发所需的基本结构和工具,简化了开发流程,使开发者可以专注于编写高质量的React组件,而无需关心底层配置。无论你是初学者还是经验丰富的开发者,这个...

    react-React组件的css选择器

    在React开发中,CSS选择器是用于特定于组件的样式化的一种强大工具。React组件的样式管理是一个关键的方面,因为它影响着应用的可维护性和性能。本篇将深入探讨React组件与CSS选择器的结合使用,以及如何优化组件的...

    react-使用React组件创建微服务应用程序

    在现代Web开发中,React作为一个强大的JavaScript库,已经成为构建用户...在实际开发过程中,不断优化组件设计,选择合适的状态管理和通信策略,以及充分利用React生态系统中的工具,都是提升微服务应用质量的关键。

    react级联选择器/支持多选/单选

    在React.js开发中,"react级联选择器/支持多选/单选"是一个常见的组件需求,用于构建具有层级关系的数据选择功能。这种组件通常被用在如地区选择、组织结构选择等场景,用户可以逐级展开选项,进行单选或多选操作。...

    react组件 课程ppt

    react组件的ppt,格式为key,组件的概念,定义,创建方法

    react-CompositorKit用于开发文档化和测试React组件库的工具

    React-CompositorKit是一款专为React组件库开发、文档化和测试而设计的强大工具。它旨在简化组件开发流程,提供高效的工作环境,并确保组件的质量。React作为一种流行的JavaScript库,广泛用于构建用户界面,而...

    react-用于messenger客户聊天插件的React组件

    在“react-用于messenger客户聊天插件的React组件”这个项目中,我们将探讨如何利用React来创建一个与Facebook Messenger集成的聊天插件。 首先,React组件是React的核心概念。它们是可重用的代码块,能够封装独立...

    react-Recyclev2使用RxJS编写React组件

    2. **创建React组件**:使用RxJS编写React组件通常涉及创建一个RxJS Observable来监听事件或数据变化,然后在Observable的订阅中更新组件的状态。例如,可以使用`fromEvent`函数监听DOM事件,然后通过`setState`更新...

    React组件的生命周期

    React组件的生命周期

    编写React组件项目实践分析

    本文通过实际项目案例,深入探讨了编写React组件的最佳实践,包括基于类的组件、状态初始化、propTypes和defaultProps的使用,以及方法定义等方面。以下是对这些知识点的详细说明: 1. **基于类的组件**: React...

    将React组件转换为Vue组件

    在IT行业中,跨框架开发是常见的需求之一,例如将已有的React组件转换为Vue组件。React和Vue都是流行的JavaScript库,它们各自具有独特的设计哲学和API。本篇将详细讲解如何进行这种转换,并探讨两者之间的差异,...

    react-structor一个高级的React组件可视化编辑器

    斯特鲁特(Structor)旨在通过其直观的界面,帮助开发者快速创建和配置React组件,无需编写大量的初始代码。这大大简化了UI开发流程,尤其适合于快速原型设计和团队协作。 斯特鲁特的核心功能包括: 1. **组件构建...

    react-reactqmap一个对腾讯web地图简单封装的React组件

    react-qmap:一个对腾讯web地图简单封装的React组件

    React-一个TreeviewUI编写作为一个React组件包含materialdesign

    在给定的标题“React-一个Treeview UI编写作为一个React组件包含material design”中,我们可以了解到这是一个使用React和Material Design库创建的Treeview组件。Material Design是一种流行的UI设计规范,它提供了...

    react-一个可以把文本中多个关键字高亮显示的react组件

    这个“react-一个可以把文本中多个关键字高亮显示的react组件”就是为了满足这样的需求而设计的。这个组件可以帮助开发者轻松地实现关键词高亮功能,提升用户在浏览和搜索文本时的体验。 首先,让我们了解React组件...

    react-一个简单的注入CSS的React组件

    例如,我们可以使用`styled-components`库,它允许我们用JSX语法编写样式,并将它们与组件直接关联: ```jsx import styled from 'styled-components'; const Button = styled.button` background-color: blue; ...

    react-reactbash可配置扩展的bash终端React组件

    **React-bash组件详解** React-bash是一款专为React开发者设计的开源组件,它允许你在React应用中嵌入一个可配置且可扩展的Bash终端模拟器。这个组件旨在为用户提供一种直观、交互式的终端体验,使用户能够在前端...

    React-react拖动排序组件

    通过分析这个项目,我们可以学习到如何将上述理论应用到实际代码中,包括组件的结构设计、事件处理函数的编写、状态的更新逻辑等。 总结来说,创建React的拖动排序组件需要对React的基础有深入理解,包括事件处理、...

    react-React水印组件支持图片水印文字水印

    1. **灵活性**:react-watermark-module 支持两种类型的水印,即图片水印和文字水印,这为开发者提供了丰富的选择,可以根据需求自由定制。 2. **易于配置**:该组件提供了一系列可配置的参数,如水印位置、角度、...

    react-Reuse通过复用React组件来创建新的组件

    2. **创建抽象组件**:根据识别出的共性,编写高阶组件、Render Props组件或利用Context API创建状态管理器。 3. **复用组件**:在新的组件中通过props调用这些抽象组件,或者直接导入和使用它们。 4. **持续优化*...

Global site tag (gtag.js) - Google Analytics