小编Ech*_*cho的帖子

反应 setState 不更新复选框选中状态

我正在关注 React 初学者教程,以制作待办事项应用程序为例。

在 App.js 中,有一个 handleChange 方法会更新状态是否选中复选框,并将其传递给 TodoItem 组件

class App extends React.Component {
    constructor() {
        super()
        this.state = {
            todos: todosData
        }
        this.handleChange = this.handleChange.bind(this)
    }

    handleChange(id) {
      console.log(id)
        this.setState(prevState => {
            const updatedTodos = prevState.todos.map(todo => {
                if (todo.id === id) {
                    todo.completed = !todo.completed
                }
                return todo
            })
            return {
                todos: updatedTodos
            }
        })
    }

    render() {
        const todoItems = this.state.todos.map(item => <TodoItem key={item.id} item={item} handleChange={this.handleChange}/>)
        return (
            <div className="todo-list">
                 {todoItems}
            </div>
        )    
    }
}
export …
Run Code Online (Sandbox Code Playgroud)

javascript reactjs

2
推荐指数
1
解决办法
249
查看次数

标签 统计

javascript ×1

reactjs ×1