Question

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

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

我尝试使用jquery中的间隔来执行此操作，但/* Arabic Translation for jQuery UI date picker plugin. */ /* Used in most of Arab countries, primarily in Bahrain, Kuwait, Oman, Qatar, Saudi Arabia and the United Arab Emirates, Egypt, Sudan and Yemen. */ /* Written by Mohammed Alshehri -- m@dralshehri.com */ ( function( factory ) { if ( typeof define === "function" && define.amd ) { // AMD. Register as an anonymous module. define( [ "../widgets/datepicker" ], factory ); } else { // Browser globals factory( jQuery.datepicker ); } }( function( datepicker ) { datepicker.regional.ar = { closeText: "إغلاق", prevText: "<السابق", nextText: "التالي>", currentText: "اليوم", monthNames: [ "يناير", "فبراير", "مارس", "أبريل", "مايو", "يونيو", "يوليو", "أغسطس", "سبتمبر", "أكتوبر", "نوفمبر", "ديسمبر" ], monthNamesShort: [ "1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12" ], dayNames: [ "الأحد", "الاثنين", "الثلاثاء", "الأربعاء", "الخميس", "الجمعة", "السبت" ], dayNamesShort: [ "أحد", "اثنين", "ثلاثاء", "أربعاء", "خميس", "جمعة", "سبت" ], dayNamesMin: [ "ح", "ن", "ث", "ر", "خ", "ج", "س" ], weekHeader: "أسبوع", dateFormat: "dd/mm/yy", firstDay: 0, isRTL: true, showMonthAfterYear: false, yearSuffix: "" }; datepicker.setDefaults( datepicker.regional.ar ); return datepicker.regional.ar; } ) );无效，无效。

任何人都可以帮我吗？请。

ReactJS：

$element.trigger('click')

的Javascript / jQuery的：

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

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/

触发ReactJS元素的onClick事件

1 个答案: