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

我有一个三级导航菜单。我想知道，如果用户没有点击任何元素（家长和孩子）超过1分钟，如何检测到它。 当我花1分钟时，我会更改

showdspregar: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>
        )
    }
}

类导航扩展组件{
建造师（道具）{
超级（道具）；
[“desplegarClick”，]forEach（（方法）=>{
this[method]=this[method].bind（this）；
});
此.state={
addClassMenu:false，
addClassNav:false，
showtab:this.props.showtab
}
}
显示隐藏子菜单（索引）{
这是我的国家({
showfstmenu:索引，
showdesplegar：没错，
});
}
desplegarClick（）{
这是我的国家({
showfstmenus:false，
showdesplegar:错，
});
}
render（）{
const renderMenu=项目=>{
返回(

{items.map（（i，索引）=>{
var-icoson；
如果（i.ico）{
icoJson=；
}
var firstMenu=i.fstmenus？“第一个菜单”：“；
var secondMenu=i.sndtitle？“第二个菜单”：“；
var thirdMenu=i.trdtitle？“第三菜单”：“；
var classMn=i.fsttitle？`mn-${i.fsttitle}`:“”；
var classSb=i.sndtitle？`sb-${i.sndtitle}`:“”；
var classTm=i.trdtitle？`tr-${i.trdtitle}`。替换（//g，“”）：；
返回(

{i.menu&&renderMenu（i.menu）}
{this.state.showfstmenus===i.fsttitle&&(
{i.fstmenu&&renderMenu（i.fstmenu）}
)}
{i.sndmenu&&renderMenu（i.sndmenu）}

{（this.state.showdspregar）&&（i.sndmenus）&&(
)}
)
})}

)
}
返回(
{renderMenu（this.props.navigation.menu）}
)
}
}

您可以使用

setTimeout（）

在一定时间后执行逻辑。我们可以将它与

componentdiddupdate（）

结合使用。我们将检查菜单是否打开，换句话说，当

showdspregar:true

时，并在一分钟后将其设置为false。此外，我们需要

绑定一个timer

变量，以便在状态改变时设置和清除计时器，我们称之为

this.timer

请参见沙盒以获取参考：

类导航扩展组件{
建造师（道具）{
超级（道具）；
[“desplegarClick”，]forEach（（方法）=>{
this[method]=this[method].bind（this）；
});
此.state={
addClassMenu:false，
addClassNav:false，
showtab:this.props.showtab
}
this.timer=null
}
componentDidUpdate（）{
if（this.state.showdesplegar）{
this.timer=setTimeout（（）=>{
这是我的国家({
显示：假
});
}, 60000);
}否则{
clearTimeout（this.timer）；
}
}
显示隐藏子菜单（索引）{
这是我的国家({
showfstmenu:索引，
showdesplegar：没错，
});
}
desplegarClick（）{
这是我的国家({
showfstmenus:false，
showdesplegar:错，
});
}
render（）{
const renderMenu=项目=>{
返回(

{items.map（（i，索引）=>{
var-icoson；
如果（i.ico）{
icoJson=；
}
var firstMenu=i.fstmenus？“第一个菜单”：“；
var secondMenu=i.sndtitle？“第二个菜单”：“；
var thirdMenu=i.trdtitle？“第三菜单”：“；
var classMn=i.fsttitle？`mn-${i.fsttitle}`:“”；
var classSb=i.sndtitle？`sb-${i.sndtitle}`:“”；
var classTm=i.trdtitle？`tr-${i.trdtitle}`。替换（//g，“”）：；
返回(

{i.menu&&renderMenu（i.menu）}
{this.state.showfstmenus===i.fsttitle&&(
{i.fstmenu&&renderMenu（i.fstmenu）}
)}
{i.sndmenu&&renderMenu（i.sndmenu）}

{（this.state.showdspregar）&&（i.sndmenus）&&(
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>
        )
    }
}