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={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} />