javascript - 在 onClick() 上显示新按钮； ReactJS

我是 reactJS 的新手，我正在制作简单的待办事项应用程序，我已经实现了编辑和删除，现在我卡在分页上，我试图在某些情况下显示新按钮，但它不起作用，我我很困惑。问题是它没有显示新按钮

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

最佳答案

你需要移动 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 函数更新状态时，都会调用渲染函数。

关于javascript - 在 onClick() 上显示新按钮； ReactJS，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/62318792/