Question

我有3个级别的导航菜单。我想知道如果超过1分钟而用户没有单击任何元素（父母和孩子），如何检测到它。当我花1分钟时，我将更改showdesplegar: false。有谁知道该怎么做？我不知道这是我原来的导航代码：

class Nav extends Component {
    constructor(props){
        super(props);

        ["desplegarClick",].forEach((method) => {
            this[method] = this[method].bind(this);
        });

        this.state = {
            addClassMenu: false, 
            addClassNav: false,
            showtabs: this.props.showtabs
        }
    }

    showHideSubmenu(index){
        this.setState({
            showfstmenu: index,
            showdesplegar: true,
        });
    }

    desplegarClick(){
        this.setState({
            showfstmenu: false,
            showdesplegar: false,
        });
    }

    render(){
        const renderMenu = items => {
            return (
                <ul className="list">
                    {items.map((i, index) => {
                        var icoJson;
                        if(i.ico){
                            icoJson = <Icon icon={i.ico} className={"ico-" + i.ico} />;
                        }
                        var firstMenu = i.fstmenu ? "first-menu" : "";
                        var secondMenu = i.sndtitle ? "second-menu" : "";
                        var thirdMenu = i.trdtitle ? "third-menu" : "";
                        var classMn = i.fsttitle ? `mn-${i.fsttitle}` : "";
                        var classSb = i.sndtitle ? `sb-${i.sndtitle}` : "";
                        var classTm = i.trdtitle ? `tr-${i.trdtitle}`.replace(/ /g, "") : "";
                        return (
                            <React.Fragment key={'fragment'+ i.fsttitle + i.sndtitle + i.trdtitle}>
                                <li className={`list__item ${firstMenu}${secondMenu}${thirdMenu}`} key={i.fsttitle + i.sndtitle + i.trdtitle}>
                                    <a 
                                        href={i.URL} 
                                        className={`${classMn}${classSb}${classTm}` + (this.state.showfstmenu === i.fsttitle ? ' active' : '')}
                                        onClick={(e) => i.fstmenu ? this.showHideSubmenu(i.fsttitle) : null || i.trdtitle ? this.props.openTabs(e, i.URL, i.Iframe, i.trdtitle) : null }>
                                            {icoJson}
                                            <span>{i.fsttitle}{i.sndtitle}{i.trdtitle}</span>
                                    </a>
                                    {i.menu && renderMenu(i.menu)}
                                    {this.state.showfstmenu === i.fsttitle && (
                                        <>{i.fstmenu && renderMenu(i.fstmenu)}</>
                                    )}
                                    {i.sndmenu && renderMenu(i.sndmenu)}
                                </li>
                                {( this.state.showdesplegar) && (i.sndmenu) && (
                                    <div key={"key"+index} className="content-bnt">
                                        <button key={"ds"+index} id="desplegar" className="btn btn--rounded" onClick={this.desplegarClick}>
                                            <Icon key={"arr"+index} icon="flecha" className="ico-flecha"/>
                                            <Icon key={"fc"+index} icon="flecha" className="ico-flecha"/>
                                        </button>
                                    </div>
                                )}
                            </React.Fragment>
                        )
                    })}
                </ul>
            )
        }
        return (
            <nav className={"nav" +( this.state.showdesplegar ? ' max-width' : '')}>
                <div className="menu">
                    {renderMenu(this.props.navigation.menu)}
                </div>
            </nav>
        )
    }
}

Answer 1

您可以使用setTimeout()，它在一定时间后执行逻辑。我们可以将其与componentDidUpdate()结合使用。我们将检查菜单是否打开，换句话说，showdesplegar: true时会打开，并在一分钟后将其设置为false。另外，我们需要bind a timer变量来设置和清除状态更改时的计时器，我们将其称为this.timer

请参阅沙箱以供参考：https://codesandbox.io/s/sharp-sutherland-07d24

class Nav extends Component {
    constructor(props){
        super(props);

        ["desplegarClick",].forEach((method) => {
            this[method] = this[method].bind(this);
        });

        this.state = {
            addClassMenu: false, 
            addClassNav: false,
            showtabs: this.props.showtabs
        }

        this.timer = null
    }

  componentDidUpdate() {
     if (this.state.showdesplegar) {
         this.timer = setTimeout(() => {
            this.setState({
               display: false
            });
         }, 60000);
      } else {
          clearTimeout(this.timer);
      }
  }

    showHideSubmenu(index){
        this.setState({
            showfstmenu: index,
            showdesplegar: true,
        });
    }

    desplegarClick(){
        this.setState({
            showfstmenu: false,
            showdesplegar: false,
        });
    }

    render(){
        const renderMenu = items => {
            return (
                <ul className="list">
                    {items.map((i, index) => {
                        var icoJson;
                        if(i.ico){
                            icoJson = <Icon icon={i.ico} className={"ico-" + i.ico} />;
                        }
                        var firstMenu = i.fstmenu ? "first-menu" : "";
                        var secondMenu = i.sndtitle ? "second-menu" : "";
                        var thirdMenu = i.trdtitle ? "third-menu" : "";
                        var classMn = i.fsttitle ? `mn-${i.fsttitle}` : "";
                        var classSb = i.sndtitle ? `sb-${i.sndtitle}` : "";
                        var classTm = i.trdtitle ? `tr-${i.trdtitle}`.replace(/ /g, "") : "";
                        return (
                            <React.Fragment key={'fragment'+ i.fsttitle + i.sndtitle + i.trdtitle}>
                                <li className={`list__item ${firstMenu}${secondMenu}${thirdMenu}`} key={i.fsttitle + i.sndtitle + i.trdtitle}>
                                    <a 
                                        href={i.URL} 
                                        className={`${classMn}${classSb}${classTm}` + (this.state.showfstmenu === i.fsttitle ? ' active' : '')}
                                        onClick={(e) => i.fstmenu ? this.showHideSubmenu(i.fsttitle) : null || i.trdtitle ? this.props.openTabs(e, i.URL, i.Iframe, i.trdtitle) : null }>
                                            {icoJson}
                                            <span>{i.fsttitle}{i.sndtitle}{i.trdtitle}</span>
                                    </a>
                                    {i.menu && renderMenu(i.menu)}
                                    {this.state.showfstmenu === i.fsttitle && (
                                        <>{i.fstmenu && renderMenu(i.fstmenu)}</>
                                    )}
                                    {i.sndmenu && renderMenu(i.sndmenu)}
                                </li>
                                {( this.state.showdesplegar) && (i.sndmenu) && (
                                    <div key={"key"+index} className="content-bnt">
                                        <button key={"ds"+index} id="desplegar" className="btn btn--rounded" onClick={this.desplegarClick}>
                                            <Icon key={"arr"+index} icon="flecha" className="ico-flecha"/>
                                            <Icon key={"fc"+index} icon="flecha" className="ico-flecha"/>
                                        </button>
                                    </div>
                                )}
                            </React.Fragment>
                        )
                    })}
                </ul>
            )
        }
        return (
            <nav className={"nav" +( this.state.showdesplegar ? ' max-width' : '')}>
                <div className="menu">
                    {renderMenu(this.props.navigation.menu)}
                </div>
            </nav>
        )
    }
}

如何在不单击react中的元素的情况下检测时间

1 个答案: