最近做了一个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. 繁星——JQuery选择器之层级

    [ancestor descendant] 在给定元素下匹配所有后代元素.这个选择器的使用概率相当之高,使用示例如下: //HTML代码: <div id='div01'> <inp ...

  2. 易学PHP——WAMP环境搭建

    安装前的准备 查看本机的类型(x86/x64,即 32 位还是 64 位) 安装好 VC9/VC11/VC14 运行库(需要按照本机的类型选择安装) 创建好一个安装路径用于安装整套 amp 环境(我使 ...

  3. 【linux】linux下yum安装后Apache、php、mysql默认安装路径

    原文:http://blog.csdn.NET/u010175124/article/details/27322757apache:如果采用RPM包安装,安装路径应在 /etc/httpd目录下apa ...

  4. php empty()和isset()的区别

    在使用 php 编写页面程序时,我经常使用变量处理函数判断 php 页面尾部参数的某个变量值是否为空,开始的时候我习惯了使用 empty() 函数,却发现了一些问题,因此改用 isset() 函数,问 ...

  5. VS 2010 编译安装 boost 库 -(和 jsoncpp 库共存)

    boost库的简单应用很容易,网上有很多资料,但是,如果要json 和 boost 一起使用就会出现这样那样的问题, 有时候提示找不到 “libboost_coroutine-vc100-mt-sgd ...

  6. MATLAB mex文件

    MATLAB的mex文件是一种特征的函数封装形式,这类函数一般由C/C++语言编写的,经过MATLAB编译器处理而生成的二进制文件.它是可以被MATLAB解释器自动装载并执行的动态链接程序,类似于wi ...

  7. Nodejs Express 4.X 中文API 3--- Response篇

    相关阅读: Express 4.X API 翻译[一] --  Application篇 Express4.XApi 翻译[二] --  Request篇 Express4.XApi 翻译[三] -- ...

  8. http 会话(session)详解

    会话(session)是一种持久网络协议,在用户(或用户代理)端和服务器端之间创建关联,从而起到交换数据包的作用机制 一.查看session id 可利用相关工具,比如firebug,httpwatc ...

  9. speed up your sharepoint

    1. warm up http://blog.nowan.hu/post/SPWakeUp-Wake-up-your-SharePoint-quickly http://blogs.msdn.com/ ...

  10. Python中使用ElementTree解析xml

    在Python中,ElementTree是我们常用的一个解析XML的模块 1.导入ElementTree模块 from xml.etree import ElementTree as ET 2.初始化 ...