最近做了一个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. JavaScript点击按钮显示 确认对话框

    //JavaScript点击按钮显示确认对话框 <html xmlns="http://www.w3.org/1999/xhtml"> <head> < ...

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

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

  4. js实现输入密码之延迟星号和点击按钮显示或隐藏

    缘由 手机打开segmentfalut时,长时间不登陆了,提示要重新登陆,输入的过程中看到输入密码时,延迟后再变成密文,很好奇,所以捣鼓了一下.本文实现了两种密码展示 代码实现 1 先明后密 js实现 ...

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

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

  6. jq 点击按钮显示div,点击页面其他任何地方隐藏div

    css .bl_rencai_32{ float: left; height: 35px; line-height: 35px; } .bl_rencai_32 >input{ width: 3 ...

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

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

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

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

  9. js实现点击按钮显示某个区域 然后点击页面中任意其他位置,隐藏该区域

    $(".licat-header-list").on("click",function(e){ $(this).addClass("active&qu ...

随机推荐

  1. BC#86 1003NanoApe Loves Sequence Ⅱ[two-pointer]

    NanoApe Loves Sequence Ⅱ  Accepts: 374  Submissions: 946  Time Limit: 4000/2000 MS (Java/Others)  Me ...

  2. KSFramework:Unity3D开发框架快速入门

    KSFramework知识 https://github.com/mr-kelly/KSFramework KSFramework是一个整合KEngine.SLua和一些开发组件组成的全功能Unity ...

  3. java io (一)

    对于文件内容的操作主要分为两大类 分别是:字符流 字节流 其中,字符流有两个抽象类:Writer   Reader 其对应子类FileWriter和FileReader可实现文件的读写操作 Buffe ...

  4. java 24 - 9 GUI 之 给窗体换图标、设置启动在屏幕中间、更换皮肤

    A.首先更改窗体左上角的图片 步骤一: 创建3个包,分别建立1个类 第一个是窗体的包,窗体类:设置窗体的主要布置和功能 第二个是资源包,图片:把想要改的图案拉进来 第三个是UI界面包,UI界面设计类: ...

  5. NOIP2015提高组Day1 Message

    题目描述 有n个同学(编号为1到n)正在玩一个信息传递的游戏.在游戏里每人都有一个固定的信息传递对象,其中,编号为i的同学的信息传递对象是编号为Ti同学. 游戏开始时,每人都只知道自己的生日.之后每一 ...

  6. 获取assemblies信息in .net core

    using System; using System.Linq; using System.Reflection; using System.Runtime.Loader; using Microso ...

  7. linux运维中的命令梳理(三)

    ----------文本操作命令---------- sed命令:文本编辑工具 sed是一个很好的文件处理工具,本身是一个管道命令,主要是以行为单位进行处理,可以将数据行进行替换.删除.新增.选取等特 ...

  8. PAT 1005. 继续(3n+1)猜想 (25)

    卡拉兹(Callatz)猜想已经在1001中给出了描述.在这个题目里,情况稍微有些复杂. 当我们验证卡拉兹猜想的时候,为了避免重复计算,可以记录下递推过程中遇到的每一个数.例如对n=3进行验证的时候, ...

  9. [win]系统优化工具dism++

    系统优化工具, 确实能将c盘扩大个2-3g. 主要是删除日志 优化系统等功能. https://www.chuyu.me/

  10. C#——Marshal.StructureToPtr方法简介

    目录 MarshalStructureToPtr方法简介 功能及位置 语法 参数说明 异常 备注 举例 本博客(http://blog.csdn.net/livelylittlefish)贴出作者(三 ...