Javascript 复选框不响应onChange-React

我正在尝试使用onChange事件翻转复选框的状态，但我无法这样做。我想在单击复选框时更改每个复选框的状态，因为我是新手，所以我需要一些帮助：'） 这是我的密码：

App.js

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

    handleChange(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>
        )    
    }
}

类应用程序扩展了React.Component{
构造函数（）{
超级（）
此.state={
待办事项：待办事项
}
this.handleChange=this.handleChange.bind（this）
}
手柄更换（id）{
this.setState（prevState=>{
const updatedTodos=prevState.todos.map（todo=>{
if（todo.id==id）{
todo.completed=！todo.completed
}
返回待办事项
})
返回{
待办事项：更新的待办事项
}
})
}
render（）{
const todoItems=this.state.todos.map（item=>）
返回(
{todoItems}
)    
}
}

TodoItem.js：

function TodoItem(props) {
    return (
        <div className="todo-item">
            <input 
                type="checkbox" 
                checked={props.item.completed} 
                onChange={() => props.handleChange(props.item.id)}
            />
            <p>{props.item.text}</p>
        </div>
    )
}

功能待办事项（道具）{
返回(
props.handleChange（props.item.id）}
/>
{props.item.text}

)
}

handleChange（id）{
this.setState（prevState=>{
const todos=[…prevState.todos]
const todo=todos.find（pr=>pr.id==id）；
todo.completed=！todo.completed；
返回{
待办事项
}
})
}

示例

const todoData=[
{
id:1，
已完成：错误，
文本：“测试1”
},
{
id:2，
已完成：错误，
文本：“测试2”
}
]
功能待办事项（道具）{
返回(
props.handleChange（props.item.id）}
/>
{props.item.text}

)
}
类应用程序扩展了React.Component{
构造函数（）{
超级（）
此.state={
待办事项：待办事项
}
this.handleChange=this.handleChange.bind（this）
}
手柄更换（id）{
this.setState（prevState=>{
const updatedTodos=prevState.todos.map（todo=>{
if（todo.id==id）{
todo.completed=！todo.completed
}
返回待办事项
})
返回{
待办事项：更新的待办事项
}
})
}
render（）{
const todoItems=this.state.todos.map（item=>）
返回(
{todoItems}
)    
}
}
ReactDOM.render(
,
document.getElementById（'root'））
);
更新了答案并提供了示例。