有没有办法 "simulate" 按刷新按钮刷新列表？

Question

有没有办法"simulate"按刷新按钮刷新列表？我有一个列表，我希望它每 10 秒更新一次。有没有办法 "press" 每 10 秒刷新一次按钮？

我的列表名称是 ActiveJobsList。这是我目前拥有的：

export function autoRefresh() {
    var counter = 10;
    var id;

    if(location.href.includes("activejobs")) {
    id = setInterval(function() {
        counter--;
        if(counter < 0 && location.href.includes("activejobs")) {
            // What should go here?
            clearInterval(id);
        } 
    }, 1000);
    }
    else if (!location.href.includes("activejobs"))
    {
        clearInterval(id);
    }
}

Answer 1

您可以在 ActiveJobsList 上利用 React.Component.shouldComponentUpdate() https://facebook.github.io/react/docs/react-component.html#shouldcomponentupdate

Answer 2

好的，所以我设法弄明白了。我用了

var x = document.getElementsByTagName('button');
console.log(x);

找出哪个按钮对应于 admin-on-rest 的刷新按钮。在我的例子中，它是数组中的第二个按钮。

这是我更新后的代码。

export function autoRefresh() {
    var counter = 30;
    var id;

    if(location.href.includes("activejobs")) {
    id = setInterval(function() {
        counter--;
        if(counter < 0 && location.href.includes("activejobs")) {
            document.getElementsByTagName('button')[1].click();
            counter = 30;
        } 
    }, 1000);
    }
    else if (!location.href.includes("activejobs"))
    {
        counter = 30;
    }
}

Answer 3

我创建了一个组件，它提供了自动更新设置的下拉菜单。这是代码，下面是如何调用它的示例。

class AutoUpdt extends Component {
    static propTypes    = {         setAutoUpdate   :   PropTypes.func 
                                ,   interval        :   PropTypes.array
                                ,   iconColor       :   PropTypes.any  
    }
    static defaultProps = {         interval        : [10,30,60,120,300,600,900,1800,3600]
                                ,   iconColor       : '#00bcd4' 
                                }
    constructor(props) {            super(props)
                   this.state = {   open            : false
                                ,   needrefresh     : false
                                ,   intervaltime    : false   
                                    }
                            }
    handleTouchTap(event) {         event.preventDefault()
                                    this.setState({  open: true,  anchorEl: event.currentTarget, })
                            }
    handleRequestClose() {          this.setState({   open: false,  })
                            }
    handleShow(event) {        let  intervaltime      =   event.currentTarget.innerText.toLowerCase().split(' (secs)')[0].trim()
                               let  newintevaltime    =   (this.state.intervaltime === false) ? intervaltime : false
                                    this.props.setAutoUpdate(  newintevaltime )   
                                    this.setState({  open: false, needrefresh: true, intervaltime : newintevaltime})
                             }  
    render() {           
            return ( <div style={{ display: 'inline-block' }}>
                        <IconButton tooltip="Set Auto Update"  
                                    iconStyle={{ color: this.props.iconColor }} 
                                    onTouchTap={this.handleTouchTap.bind(this)} ><AutoIcon /></IconButton>
                          <Popover  open={this.state.open}     
                                    anchorEl={this.state.anchorEl}  
                                    anchorOrigin={{ horizontal: 'left', vertical: 'bottom' }}  
                                    targetOrigin={{ horizontal: 'left', vertical: 'top' }}  
                                    onRequestClose={this.handleRequestClose.bind(this)}    >
                            <Menu>
                                    {this.props.interval.map( el  =>   
                                    <ListItem   style={(  el.toString() !==  this.state.intervaltime )  
                                                    ?  {  color:'#00bcd4'  , margin: 0, padding : 2  }  
                                                    :  { color: '#f48fb1'  , margin: 0, padding : 2  }  }   
                                                data-key={ el.toString()} 
                                                key={el.toString()}  
                                                primaryText={ el.toString()  + ' (secs)'}   
                                                onTouchTap={this.handleShow.bind(this)} />  )}
                            </Menu  >
                        </Popover>
                    </div>)
        }
    }

   // It is invoked by using these two functions in another component

 checkMounted(){     this.props.checkMounted     && this.props.checkMounted()   &&  this.updateData()
 }
 setAutoUpdate =  ( intervaltimer, checkMounted)  =>  {  
                    const this_ = this
                    this.state.intervaltimer &&  clearInterval(this.state.intervaltimer)
                    this.setState(   intervaltimer ? { intervaltimer : setInterval( this_.checkMounted.bind(this_), +intervaltimer * 1000)   } : { intervaltimer : false} ) 
 }

 // And using this line in the render function of the calling component

 { this.props.hasAuto     &&  <AutoUpdt     setAutoUpdate={this.setAutoUpdate}   icon={<NavigationRefresh />}   /> }

有没有办法 "simulate" 按刷新按钮刷新列表？

Is there a way to "simulate" pressing the refresh button to refresh a List?

admin-on-rest