我是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>
};
}
答案 0 :(得分:2)
您需要移动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函数。