javascript - 如何在不点击 react 元素的情况下检测时间

Question

我有一个 3 级导航菜单。我想知道如果超过 1 分钟用户没有点击任何元素( parent 和 child )，如何检测到它。 当我花了 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)一个定时器变量来在状态改变时设置和清除定时器，我们称之为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>
        )
    }
}