Trigger onClick event for a ReactJS element

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

Please, post minimal amount of code needed to reproduce your use case. — Andreyco
– Andreyco, Commented Mar 8, 2016 at 22:31
The idea of React is mapping data into DOM. The idea of jQuery is manipulating existing DOM. You're trying to mix two approaches, that won't make any good to your project. Just use this.loadMoreComments until it returns an empty set or null or whatever, in componentWillMount, and push new data into component state per each response. — rishat
– rishat, Commented Mar 8, 2016 at 22:47

Andreyco · Accepted Answer · 2016-03-08 23:01:56Z

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/

answered Mar 8, 2016 at 23:01

Andreyco

22.9k5 gold badges63 silver badges66 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

albertojauregui Over a year ago

Wow, this is a lot more easy to implement, I already did this and it's working, thanks a lot Andreyco!

Andreyco Over a year ago

Actually, React is pretty simple & easy to learn. Practice, you will find simple solutions to anything later.

Collectives™ on Stack Overflow

Trigger onClick event for a ReactJS element

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related