javascript - 触发 ReactJS 元素的 onClick 事件

Question

我有一个使用reactjs加载的元素列表，在该列表的末尾有一个按钮，可以使用reactjs通过onclick事件加载更多项目。

我想创建一个使用javascript或jquery的函数，触发onclick事件来加载所有项目，而不是逐一单击加载更多项目。

我尝试使用 jquery 中的间隔来执行此操作，但 $element.trigger('click') 不起作用，什么也不做。

有人可以帮我解决这个问题吗？请。

ReactJS:

var ConversationShowMore = React.createClass({
    getInitialState: function(){
        return {show: false, next_comments: ""};
    },
    loadMoreComments: function(){
        this.setState({show: true});
    },
    render: function(){
        var obj = this.props.next_comments || "";
        if (obj != "" && requesturl != obj) {
            if (this.state.show) {
                return (
                    <ConversationBox url={this.props.next_comments} />
                )
            }else{
                return (
                    <a onClick={this.loadMoreComments} className="showmoreconversations" href="#" role="button"><span>Load more conversations...</span></a>
                )
            }
        }else{
            return (
                <div></div>
            )
        }
    }
});

Javascript/jQuery:

    var tid = setInterval(myCode, 5000);
    function myCode() {
        if($("#conversationContainer a.showmoreconversations").length){
            $("#conversationContainer a.showmoreconversations").trigger('click');
        }else{
            abortTimer();
        }
    }
    function abortTimer() {
        clearInterval(tid);
    }

Answer 1

当组件挂载后，您将触发加载更多注释的请求。当此请求完成后，您可以在 X 毫秒内安排另一个请求。

loadMoreComments(){
    console.log('loaded more comments');
  // Probably, you will trigger async request. Call following line when this request is complete.
  this.timeout = window.setTimeout(this.loadMoreComments, 5000);
},

componentDidMount() {
    this.loadMoreComments();
},

记得在卸载组件时取消预定的请求。否则，它将几乎永远运行(并且肯定会抛出异常)

componentWillUnmount() {
    window.clearTimeout(this.timeout);
},

这里的工作示例:https://jsfiddle.net/69z2wepo/34030/