最近做了一个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} />