javascript - React onChange事件返回TypeError:props.handleChange不是函数

我在类handleChange下创建了一个名为id的简单类方法，其参数为App。

我试图从称为handleChange的子功能组件中调用此TodoItem方法。

当我单击复选框时，浏览器返回一个TypeError说props.handleChange(props.item.id) is not a function，如图所示：



有人可以解释TodoItem中我的代码有什么问题吗？

App类组件：

import React, { Component } from "react";
import TodoItem from "./TodoItem";
import todosData from "./todosData";

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

  handleChange(id) {
    console.log("changed", id);
  }

  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 default App;

TodoItem功能组件：

import React from "react";

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

export default TodoItem;

最佳答案

在构造函数中，您未正确绑定函数

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      todos: todosData,
    };
    this.handleChange = this.handleChange.bind(this)//<-- This is right
    //this.handleChange = this.handleChange(this);//<-- This is wrong
}