首页 > 代码库 > React 点击按钮显示div与隐藏div,并给div传children
React 点击按钮显示div与隐藏div,并给div传children
最近做了一个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=http://www.mamicode.com/{this.state.department}> {department} </Input> <Input className="box-select" type=‘select‘ placeholder="选择产品线" onChange={this.changeProductLine.bind(this)} value=http://www.mamicode.com/{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=http://www.mamicode.com/{this.state.department}> {department} </Input> <Input className="box-select" type=‘select‘ placeholder="测试加载" onChange={this.changeProductLine.bind(this)} value=http://www.mamicode.com/{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
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。