javascript - 关闭响应式导航 | react JS

Question

我有一个 header 组件来管理我的导航组件的状态。

如果用户单击汉堡包图标，导航会成功切换，但是，如果用户单击或点击导航之外的任何位置，我需要关闭导航。

我怎样才能做到这一点？

这是我的代码:

export default class Header extends React.Component {

    constructor() {
        super();

        this.state = {
            mobileOpenNav: false
        };

        bindAll([
            'openMobileNav',
            'openContactModal'
        ],this);
    }

    openMobileNav() {
        this.props.contactModalToggle(false);

        this.setState({
            mobileOpenNav: !this.state.mobileOpenNav
        })
    }



    openContactModal() {
        this.props.contactModalToggle();

        this.setState({
            mobileOpenNav: !this.state.mobileOpenNav
        });
    }

    render() {
        const {nav, contactModalToggle, location, logos} = this.props;
        const {mobileOpenNav} = this.state;

        return (
            <div className="header-wrap">
                <div className="header">
                    <Logo location={location} logoUrls={logos} />
                    <Navigation 
                        location={location} 
                        nav={nav} 
                        contactModalToggle={this.openContactModal} 
                        mobileOpen={mobileOpenNav} 
                        mobileToggle={this.openMobileNav} 
                    />
                    <div className="hamburger" onClick={this.openMobileNav}><img src={HamburgerIcon} /></div>
                </div>
            </div>
        )
    }
}

Answer 1

以下解决方案应该适合您。

componentDidMount() { 
     document.addEventListener('click', this.handleClickOutside.bind(this), true); 
} 

componentWillUnmount() { 
    document.removeEventListner('click', this.handleClickOutside.bind(this), true); 
} 

handleClickOutside(e) { 
    const domNode = ReactDOM.findDOMNode(this); 

    if(!domNode || !domNode.contains(event.target)) { 
       this.setState({ 
         mobileOpenNav: false 
       }); 
    } 
 }