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

Question

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

var TodoList=React.createClass({
    render:function(){
    var {todos}=this.props;
    var limit = 5;

    function onLoadMore() {
        this.setState({
            limit: this.state.limit + 5
        });
    }
    var renderTodos=()=>{
            return todos.slice(0,this.state.limit).map((todo)=>{
                return(
                        <Todo key={todo.todo_id}{...todo} onToggle={this.props.onToggle}/>
                );
            });

    };

    return(
        <div>
            {renderTodos()}
            <a href="#" onClick={this.onLoadMore}>Load</a>
        </div>
        )
}
});
module.exports=TodoList;

Answer 1

变化:

1.首先定义limit中state使用变量getInitialState的方法,你没有定义的限制,这就是为什么this.state.limit是null.

2.定义方法的所有functions外部render.

3. Arrow function与renderTodos不是必需的.

4.使用this关键字调用renderTodos方法如下:

{this.renderTodos()}

写这样:

var TodoList=React.createClass({

    getInitialState: function(){
        return {
            limit: 5
        }
    },

    onLoadMore() {
        this.setState({
            limit: this.state.limit + 5
        });
    },

    renderTodos: function(){
        return todos.slice(0,this.state.limit).map((todo)=>{
            return(
                <Todo key={todo.todo_id}{...todo} onToggle={this.props.onToggle}/>
            );
        });
    };

    render:function(){
        var {todos} = this.props;
        return(
            <div>
                {this.renderTodos()}
                <a href="#" onClick={this.onLoadMore}>Load</a>
            </div>
        )
    }
});