触发ReactJS元素的onClick事件

Question

I have a list of elements that are loaded with reactjs and at the end of that list there is a button that loads more items via onclick event using reactjs.

I want to create a function that using javascript or jquery, trigger the onclick event to load all the items instead of clicking one by one on the load more items.

I tried to do it using a interval in jquery but the $element.trigger('click') is not working, does nothing.

Can anyone help me with this? please.

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

When component is mounted, you will trigger request to load more comments. When this request is complete, you schedule another request in X miliseconds.

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();
},

Remember to cancel scheduled request when unmounting component. Otherwise, it will run virtually forever (and will surely case exception to be thrown)

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

Working example over here: https://jsfiddle.net/69z2wepo/34030/