最近做了一个react的点击按钮显示与隐藏div的一个小组件:

【筛选】组件FilterButton

import React,{Component} from 'react';
import {render} from 'react-dom';

export default class FilterButton extends Component{
  constructor(props){
      super(props);
      this.state = {
         clickProps:{
             display: 'none',  //控制display的值来隐藏与显示
             name:'筛选'
         }
      }
  }

  //组件的props发生改变,在组件接收到一个新的prop时被执行。这个方法在初始化render时不会被调用。
  componentWillReceiveProps(nextProps) {
        if(nextProps.needConfirm) {
             this.setState(
                  {
                     clickProps:{
                            display: 'none',
                            name:'筛选'
                     }
                 }
             );
         }
    }

/*
 *  'inline-block' == this.state.clickProps.display   条件:当前的state中display的值是否为 inline-block
 *   this.setState({clickProps:{display: 'none',name:'筛选'}})  值:  如果是,则隐藏div并在button上显示'筛选'
 *   this.setState({clickProps:{display: 'inline-block',name:'取消'}});  值:  如果不是,则显示div并在button上显示'取消'
*/
  changeDisplay() {
    'inline-block' == this.state.clickProps.display ? this.setState({clickProps:{display: 'none',name:'筛选'}}) : this.setState({clickProps:{display: 'inline-block',name:'取消'}});
  this.props.click(this.state.clickProps.display);
  }

//this.props.children为这个按钮的子组件
  render(){
     return(
         <div className="box" style={{'margin': '20'}}>
              <button ref="tip" className="btn btn-default" style={{'display':'block','marginTop': '118'}} onClick={this.changeDisplay.bind(this)}><span className="glyphicon glyphicon-th-list"></span> {this.state.clickProps.name}</button>
              <div className="filter-box" style={{'display':this.state.clickProps.display,'height':'auto','padding':'10','border':'1px solid #ddd','borderRadius':'4','boxShadow':'0px 2px 4px #ccc','marginTop':'10','backgroundColor':'#fff','position':'fixed','left':'310px','zIndex':'9999','transition':'all 3s ease-in-out'}}>
                     {this.props.children}
              </div>
         </div>
     );
  }
}

【调用】组件 FilterButton

import React,{Component} from 'react';
import {render} from 'react-dom';
import Input from 'react-bootstrap/lib/Input.js';

import FilterButton from '../../../../public_component/button/FilterButton';

export default class InspectionResults extends Component {
  constructor(props){
      super(props);
  }

 render(){

     //使用一个常量,调用FilterButton,并把它的子组件回传

     const selectBtn = (
         <FilterButton click={this.selectClick.bind(this)} needConfirm={this.state.needConfirm}>
             <Input className="box-select" type='select'
                   placeholder="选择部门" onChange={this.changeDepartment.bind(this)} value={this.state.department}>
                 {department}
             </Input>
             <Input className="box-select" type='select'
                   placeholder="选择产品线" onChange={this.changeProductLine.bind(this)} value={this.state.productLine}>
                 {productLine1}
             </Input>
             <button type="button" name="新增" className="btn btn-jj-add mt24" onClick={this.selectConfirm.bind(this)}>
                 确定
             </button>
         </FilterButton>
    );

   return(
     <div>{selectBtn}</div>
   );
 }
}

react.js 传子组件的另一个方法,也可以这样做:

const children = (
    <Input className="box-select" type='select'
                       placeholder="测试加载" onChange={this.changeDepartment.bind(this)} value={this.state.department}>
                    {department}
                </Input>
                <Input className="box-select" type='select'
                       placeholder="测试加载" onChange={this.changeProductLine.bind(this)} value={this.state.productLine}>
                    {productLine1}
                </Input>
                <button type="button" name="新增" className="btn btn-jj-add mt24" onClick={this.selectConfirm.bind(this)}>
                    确定
                </button>
);

<FilterButton chlidren={this.props.children} />

React 点击按钮显示div与隐藏div,并给div传children的更多相关文章

  1. 点击按钮显示隐藏DIV,点击DIV外面隐藏DIV

    点击按钮显示隐藏DIV,点击DIV外面隐藏DIV 注意:此方法对touch事件不行,因为stopPropagation并不能阻止touchend的冒泡 <style type="tex ...

  2. js构建函数,点击按钮显示div,再点击按钮或其他区域,隐藏div

    这只是一个例子,先看看效果: html代码: <nav> <span class="nav_logo"></span> <h1>云蚂 ...

  3. 安卓TextView限定行数最大值,点击按钮显示所有内容

    问题展示 如上图所示,在普通的TextView中,要求: 最多显示3行 超过三行显示展开按钮 且点击展开按钮显示完整内容 这个需求看似简单,但解决起来会遇到两个较为棘手的问题:1,如何判断是否填满了前 ...

  4. jquery点击按钮显示和隐藏DIv

    function changeDisplay() { if ($("#btnShow").attr("value")== "添加附件") { ...

  5. js第一天 点击按钮显示与隐藏

    <!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title> ...

  6. javascript学习代码--点击按钮显示内容

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  7. 例题.点击按钮显示内容+弹窗效果+ajax

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  8. js 点击按钮显示下拉菜单

    <li> <a id = "rank" onclick="showGroup()"></a></li><l ...

  9. 点击按钮对两个div的隐藏与显示进行切换

    HTML: <button type="button"  id="showHidden">点击切换div的隐藏与显示</button> ...

随机推荐

  1. http://875880923.iteye.com/blog/1963400

    已经接触了一段时间的ACM(详见百度百科)了,每回刷杭电oj的题累了的时候,就喜欢去看Ranklist里面的排名,看看前面的牛人的格言,让自己有一点憧憬.有一天突然好奇杭电上的人做的总题数的数量与人数 ...

  2. Apache curator-client详解

    Apache curator框架中curator-client组件可以作为zookeeper client来使用,它提供了zk实例创建/重连机制等,简单便捷.不过直接使用curator-client并 ...

  3. 关于JAVA中子类和父类的构造方法

    本篇文章总结了一些关于Java构造方法的常见问题. 为什么创建了一个子类对象会调用其父类的构造方法 如下代码示例: package simplejava; class Super { String s ...

  4. Visual Studio 代码折叠快捷键(摘要)

    代码编辑器的展开和折叠代码确实很方便和实用.以下是展开代码和折叠代码所用到的快捷键,很常用: Ctrl + M + O: 折叠所有方法 Ctrl + M + M: 折叠或者展开当前方法 Ctrl +  ...

  5. hdu3932 模拟退火

    模拟退火绝对是从OI--ACM以来接触过的所有算法里面最黑科技的orz 题意:地上有一堆hole,要找一个点,使得(距离该点最远的hole的距离)最小. sol:本来想套昨天的模拟退火模板,初值(0, ...

  6. bootstrap学习总结-05 常用标签3

    1 单选框,多选框 1)单选框 单选框(radio)用于从多个选项中只选择一个.设置了 disabled 属性的单选或多选框都能被赋予合适的样式.对于和多选或单选框联合使用的 <label> ...

  7. 9.4---集合子集(CC150)

    这题非常复杂.牛客网上对应的题目对结果要求比较苛刻,所以要调整. 整体思路是:先放进去一个,然后第二个来的时候插入到已有的,并且把自己也放进去. public static ArrayList< ...

  8. Python的全局变量

    应该尽量避免使用全局变量.不同的模块都可以自由的访问全局变量,可能会导致全局变量的不可预知性.对全局变量,如果程序员甲修改了_a的值,程序员乙同时也要使用_a,这时可能导致程序中的错误.这种错误是很难 ...

  9. [git]安装git-pylint-commit-hook提高python项目中的代码质量

    什么是'git-pylint-commit-hook' 我在工作中,团队为了保证代码和提高代码的质量,要求每个项目都要求安装git-pylint-commit-hook,它是个钩子,会在你提交代码到本 ...

  10. 编写一个小Servlet程序

    1.编写一个java类,此类继承HttpServlet 创建完工程(见上一篇随笔:使用eclipse创建在myeclipse中运行的web工程),在src中新建一个包,包名字叫servlet:再新建一 ...