React 点击按钮显示div与隐藏div,并给div传children

Posted 礼拜16

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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} />

 

以上是关于React 点击按钮显示div与隐藏div,并给div传children的主要内容,如果未能解决你的问题,请参考以下文章

点击按钮对两个div的隐藏与显示进行切换

Web表格怎么点击【查看】按钮弹出Div显示更多内容?

js 点击一个按钮出现一个div然后在点击div以外的任何地方在让div隐藏怎么写

怎样用jquery控制div的显示与隐藏

React js - 显示或隐藏 div

怎么用js显示隐藏div