Question

更新：已修复此问题，您需要一个包含返回函数中所有内容的父容器。即使是一个空的div也会起作用。

我有一个菜单，当用户在菜单外单击时，它应该关闭。我有一个状态“ showMenu”，该状态取决于它的true还是false应该隐藏还是显示菜单。 “菜单”是一个汉堡菜单，单击时会显示一个带有选项的面板。硒图片：

我尝试使用“ ReactDOM.findDOMNode”来检测组件外部的点击，因此将“ showMenu”设置为false。我的解决方案以这种方式工作，即当用户在其外部单击时它会关闭，但是当用户单击菜单项时ALSO也会关闭。当我单击菜单时，将显示用户单击的子菜单。

简而言之，我有以下代码：

public handleClickOutside = event => {
const domNode = ReactDOM.findDOMNode(this);

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

  public componentWillUnmount() {
document.removeEventListener('click', this.handleClickOutside, true);
}


public componentDidMount(): void {

this.props.provider.getMegaMenu(false).then((result: MegaMenuItem[]) => {
    this.setState({
        allItems: result,
        activeItems: result,
        parentItem: null,            
    });

 public componentDidMount(): void {

this.props.provider.getMegaMenu(false).then((result: MegaMenuItem[]) => {
    this.setState({
        allItems: result,
        activeItems: result,
        parentItem: null,            
    });

    this.props.provider.getMegaMenu(true); // Cache a fresh version of the menu
  });
  document.addEventListener('click', this.handleClickOutside, true);
 }

完整的验证码：

<React.Fragment>

    <div className={styles.menucontainer}>

        <div className={styles.menuopner} onClick={(e) => {this.setState({ showMenu: !this.state.showMenu });}}> 
            <span className={`${styles.burger} ms-Icon ms-Icon--GlobalNavButton`}></span>
        </div> 
        <div id="megamenuSearchBoxContainer" className={styles["searchBoxContainer"]} />
    </div>

    {this.state.showMenu ?         
    <div className={styles.container}>

        <ul className={styles.mobile}>

            {this.state.parentItem ? 
                <li className={styles.header}>
                <p className={styles.arrowleft}>
                    <span className="ms-Icon ms-Icon--ChevronLeft" onClick={(e) => {this.closeMenuPage();}}></span>
                </p>
                    <a href={this.state.parentItem.url} className={styles.other}>{this.state.parentItem.title}</a>
                </li>
                 : 
                 null }

            {this.state.activeItems.map((item, index) => {
                return (
                <li className={styles.item} >
                {item.url != '.' ?
                    <a href={item.url} className={styles.other}>{item.title}</a>
                :
                    <p className={styles.other}>{item.title}</p>
                }
                    {this.state.parentIndex.length < 2 && 
                    <p className={styles.arrowright}>
                        <span className="ms-Icon ms-Icon--ChevronRight" onClick={(e) => {this.openMenuPage(item, index);}}></span>
                    </p>
                    }
                </li>);
            })}
        </ul>
    </div>  
    :
    null}
    {
        <span style={{display: 'none'}}>
        {
            setTimeout(this.moveSearchBox, 200)
        }
        </span>
    }                       
</React.Fragment>

在外部单击时隐藏菜单，“ ReactDOM.findDOMNode”不起作用

0 个答案: