Question

我是reactJS的新手，正在制作简单的To-do App，我已经实现了Edit和Delete，现在我停留在分页中，在某些情况下我试图显示新按钮，但不是工作，我很困惑。问题是它没有显示新按钮

class App extends Component {
state = {
    inputValue: '',
    todos: [],
    currentPage:1,
    pageCount:1,
};

setPageCount = () => {
        let {todos} = this.state
      this.setState({pageCount: Math.ceil(todos.length / 5)})
        console.log('--------this.state.pageCount', this.state.pageCount );
}

renderPagination = () => {
    let {pageCount} = this.state
    for(let i=0; i<= pageCount; i++) {
        return <button onClick={this.paginationDisplay()}>
            {pageCount}
        </button>
    }
}

paginationDisplay = () => {
    console.log('Hello world')

addItem = () => {
        let {inputValue, todos} = this.state
        this.setState({todos: [...todos, {inputValue, id: uuidv4()}]})
        this.setPageCount()
        this.renderPagination()

    }

render() {
        return <div className={"App"}>
            <div className="App-header">
                <h2>Welcome to To-Do List App</h2>
            </div>
            <input onChange={this.handleInputValue} name={''} type='text'/>
            <button onClick={() => this.addItem()} className={'btn btn-primary'}>Add</button>
            <ul>
                {
                    this.state.todos.map(todoItem => <ListItem
                        key={todoItem.id}
                        todoItem={todoItem}
                        deleteItem={this.deleteItem}
                        editItem={this.editItem}
                        submitEdit={this.submitEdit}
                    />)
                }
            </ul>
        </div>
    };
}

Answer 1

您需要移动renderPaginator函数来进行这样的渲染。

addItem = () => {
    let { inputValue, todos } = this.state;
    this.setState({ todos: [...todos, { inputValue, id: uuid() }] });
    this.setPageCount();
  };
  render() {
    return (
      <div className={"App"}>
        <div className="App-header">
          <h2>Welcome to To-Do List App</h2>{" "}
        </div>
        <input onChange={this.handleInputValue} name={""} type="text" />{" "}
        <button onClick={() => this.addItem()} className={"btn btn-primary"}>
          Add
        </button>
        <ul>
          {" "}
          {this.state.todos.map(todoItem => (
            <div
              key={todoItem.id}
              todoItem={todoItem}
              deleteItem={this.deleteItem}
              editItem={this.editItem}
              submitEdit={this.submitEdit}
            />
          ))}
        </ul>
        {this.renderPagination()}
      </div>
    );
  }

每次使用setState函数更新状态时都会调用一次render函数。

在onClick（）上显示新按钮； ReactJS

1 个答案: