Question

我想用加载更多选项显示待办事项列表。我正在应用limit.Limit适用于list.But当我添加loadmore（）函数。然后我得到错误 this.state.limit为null 我错了。任何人都可以建议我。＆＃xA;这是我的代码＆＃xA; todoList.jsx

＆＃xA ;＆＃xA;

  var TodoList = React.createClass（{＆＃xA; render：function（）{＆＃xA; var {todos} = this.props;＆＃xA; var limit = 5 ;＆＃xA;＆＃xA;函数onLoadMore（）{＆＃xA; this.setState（{＆＃xA; limit：this.state.limit + 5＆＃xA;}）;＆＃xA;}＆＃xA ; var renderTodos =（）=＆gt; {＆＃xA; return todos.slice（0，this.state.limit）.map（（todo）=＆gt; {＆＃xA; return（＆＃xA;＆lt; Todo key = {todo.todo_id} {... todo} onToggle = {this.props.onToggle} /＆gt;＆＃xA;）;＆＃xA;}）;＆＃xA;＆＃xA;};＆＃ xA;＆＃xA;返回（＆＃xA;＆lt; div＆gt;＆＃xA; {renderTodos（）}＆＃xA;＆lt; a href =“＃”onClick = {this.onLoadMore}＆gt;加载＆lt; / a＆gt ;＆＃xA;＆lt; / div＆gt;＆＃xA;）＆＃xA;}＆＃xA;}）;＆＃xA; module.exports = TodoList;＆＃xA;

＆ #xA;

Answer 1

<强>的变化：

1。首先使用limit方法定义state变量中的getInitialState，您没有定义限制，这就是为什么{{1} }是this.state.limit。

2。定义null方法之外的所有functions。

3。 render不需要Arrow function。

4。使用renderTodos关键字调用this方法，如下所示：

renderTodos

像这样写：

{this.renderTodos()}

Answer 2

这是单击按钮。

众所周知，react组件具有函数componentDidMount()，当该组件的模板呈现到DOM中时会自动调用该函数。而且我使用了相同的函数将事件监听器添加到div iScroll中。元素的scrollTop属性将找到滚动位置，并将其添加到clientHeight属性中。接下来，if条件将检查这两个属性的相加是否大于或等于滚动条的高度。如果条件为真，loadMoreItems函数将运行。

class Layout extends React.Component {
  constructor(props) {
   super(props);
   this.state = {
      items: 10,
      loadingState: false
    };
  }

  componentDidMount() {
    this.refs.iScroll.addEventListener("scroll", () => {
      if (this.refs.iScroll.scrollTop + this.refs.iScroll.clientHeight >=this.refs.iScroll.scrollHeight){
        this.loadMoreItems();
      }
    });
  }

  displayItems() {
    var items = [];
    for (var i = 0; i < this.state.items; i++) {
      items.push(<li key={i}>Item {i}</li>);
    }
    return items;
  }

  loadMoreItems() {
    this.setState({ loadingState: true });
    setTimeout(() => {
      this.setState({ items: this.state.items + 10, loadingState: false });
    }, 3000);
  }

  render() {
    return (
      <div ref="iScroll" style={{ height: "200px", overflow: "auto" }}>
        <ul>
          {this.displayItems()}
        </ul>

        {this.state.loadingState ? <p className="loading"> loading More Items..</p> : ""}

      </div>
    );
  }
}

This is example

ReactJs如何显示带有更多选项的列表

2 个答案: