ReactJS中有多个下拉菜单，一次只能打开一个

Question

I have two dropdowns being passed in as props to components. I can control both with seperate states but I think this can all be done with one state?

Header

import React from 'react';
import DarkLabel from './DarkLabel';
import HeaderDropdown from './HeaderDropdown';

export default class Header extends React.Component {

    componentWillMount() {
        this.setState({
            listOpen: false
        })
    }

    render() {
        ...
        return (
            <div className="row header">
                <div className="col-xs-10">
                    <DarkLabel classExtra="dark-label-lg" icon="/images/system-icons/document_empty.png"
                               content={taskCode}/>
                    <DarkLabel classExtra="dark-label-2x dark-label-lg" icon="/images/system-icons/building.png"
                               dropdown=<HeaderDropdown data={this.props.enquiry.entity ? this.props.enquiry.entity : null}/>
                               content={this.props.enquiry.entity ? this.props.enquiry.entity.name : 'ERROR'}
                               right_icon="/images/system-icons/bullet_arrow_down.png"/>
                    <DarkLabel classExtra="dark-label-md" icon="/images/system-icons/ceo.png"
                               dropdown=<HeaderDropdown data={this.props.enquiry.contact ? this.props.enquiry.contact : null}/>
                               content={this.props.enquiry.contact ? this.props.enquiry.contact.firstName + ' ' + this.props.enquiry.contact.lastName : '-'}
                               right_icon="/images/system-icons/bullet_arrow_down.png"/>
                    <DarkLabel classExtra="flag"
                               content={'/images/flags/large/'+this.props.enquiry.entity.country.countryCode+'.png'}
                               right_icon="/images/system-icons/cog.png" right_icon_callback={this.handleAddressModal.bind(this)}/>
                </div>
            </div>
        )
    }

}

HeaderDropdown

import React from 'react';

export default class HeaderDropdown extends React.Component {

    componentWillMount() {

    }

    render() {

        return (
            <div>
                <div className="dark-label-dropdown">
                    Test
                </div>
            </div>
        );
    }
}

How can I make it so only one can be open at a time and close all others if a different one is clicked? Do I need to store something from 'this' when I bind a click event to HeaderDropdown?

---

I have missed something from the question. This needs to happen when the user clicks on right_icon in the DarkLabel.

DarkLabel

import React from 'react';

export default class DarkLabel extends React.Component {

    componentWillMount() {

    }

    truncate(limit) {
...
    }

    render() {
        var icon = '', content = '';
        var rightIcon = '';
        ...

        return (
            <div className={'pull-left dark-label-wrapper '+this.props.classExtra}>
                {icon}
                <div>{content}</div>
                {rightIcon}
                {this.props.dropdown}
            </div>
        );
    }
}

Answer 1

What you could do is add a onClick method to your HeaderDropdown and in your Header handle the state for that. The proper way would be using a store of some kind (redux) but that might be out of scope for this example.

So in short I suggest you alter you Header to this:

import React from 'react';
import DarkLabel from './DarkLabel';
import HeaderDropdown from './HeaderDropdown';

export default class Header extends React.Component {

    componentWillMount() {
        this.setState({
            listOpen: false,
            activeDropdown: 1
        })
    }

    render() {
        const headerDropdownA = (
            <HeaderDropdown 
                data={...} 
                onClick={() => this.setState({activeDropDown: 1})} 
                        isActive={this.state.activeDropdown === 1}
                />
        )

        const headerDropdownA = (
            <HeaderDropdown 
                data={...} 
                onClick={() => this.setState({activeDropDown: 2})} 
                        isActive={this.state.activeDropdown === 2}
                />       
        )
        return (
            <div className="row header">
                <div className="col-xs-10">
                   <DarkLabel  classExtra="..."
                                         dropdown={headerDropdownA}
                               content={...}
                               right_icon="/images/system-icons/bullet_arrow_down.png"/>
                    <DarkLabel classExtra="..."
                               dropdown={headerDropdownB}
                               content={...}
                               right_icon="/images/system-icons/bullet_arrow_down.png"/>
                </div>
            </div>
        )
    }
}

I added a state for the current active dropdown. In your dropdown you can then access the active state with this.props.isActive .

But propably this will not already be sufficient since every click will toggle the dropdown again, also when you click the options? But it might give you a good starting point.

Answer 2

You can create a high-order-component that will detect clicks outside of your component eg

import React, { Component, PropTypes } from 'react';
import ReactDOM from 'react-dom';

const clickOutsideEvents = [ 'mousedown', 'touchstart' ];
const isDescendant = ( el, target ) => target !== null ? el === target || isDescendant( el, target.parentNode ) : false;

export default class ClickOutside extends Component {

      static propTypes =
      {
            children       : PropTypes.node,
            onClickOutside : PropTypes.any,
      };

      componentDidMount()
      {
            if ( !this.props.onClickOutside ) return;
            clickOutsideEvents.forEach( e => document.addEventListener( e, this.handleClickOutside ) )
      }

      /**
       * Remove the listener in case the props change and there is not ClickAway handler
       * @param  { Object } prevProps
       */
      componentDidUpdate( prevProps )
      {
            if ( prevProps.onClickOutside !== this.props.onClickOutside )
            {
                  clickOutsideEvents.forEach( e => document.removeEventListener( e, this.handleClickOutside ) );

                  if ( this.props.onClickOutside )
                  {
                      clickOutsideEvents.forEach( e => document.addEventListener( e, this.handleClickOutside ) )
                  }
            }
      }

      /**
       * Remove listeners when Component unmount
       */
      componentWillUnmount()
      {
           clickOutsideEvents.forEach( e => document.removeEventListener( e, this.handleClickOutside ) );
      }

      /**
       * Call callback on ClickAway and pass the event
       * @param  event
       */
      handleClickOutside = ( e ) =>
      {
            const el = ReactDOM.findDOMNode( this );

            if ( document.documentElement.contains( e.target ) && !isDescendant( el, e.target ) )
            {
                this.props.onClickOutside( e );
            }
      };

      /**
       * Render the Elements that are Wrapped by the ClickAway
       */
      render()
      {
           return this.props.children;
      }
}

Then wrap your dropdowns with this HOC and set the state of the component based on that

eg

setDropdownState(){
   this.setState({ listOpen: false });
}


render(){ 
  return(<ClickOutside onClickOutside={ this.setDropdownState.bind( this ) }>
     <HeaderDropdown listOpen={ this.state.listOpen }>
  </ClickOutside>)
}

You can check this implementation https://github.com/AvraamMavridis/react-clickoutside-component