无法将函数传递给ReactJS中的子组件

我有两个文件

App.js

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

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

  render() {
    const ToDoItems = this.state.todos.map(function (content) {
      return (
        <ToDoItem
          key={content.id}
          content={content}
          handleChange={this.handleChange}
        />
      );
    });

    return <div>{ToDoItems}</div>;
  }
}

类应用程序扩展组件{
构造函数（）{
超级（）；
此.state={
todos:ToDoData，
};
}
手柄更换（id）{
控制台日志（“已更改”，id）；
}
render（）{
const ToDoItems=this.state.todos.map（函数（内容））{
返回(
);
});
返回{ToDoItems}；
}
}

和ToDoitem.js

function ToDoItem(props) {
  console.log(props);
  return (
    <label className="container">
      <input
        type="checkbox"
        checked={props.content.is_complete}
        onChange={() => props.handleChange(props.content.id)}
      />
      {props.content.title}
      <br />
    </label>
  );
}

功能待办事项（道具）{
控制台日志（道具）；
返回(
props.handleChange（props.content.id）}
/>
{props.content.title}


);
}

上面说

TypeError:无法读取未定义的属性“handleChange”

20 | 23 | handleChange={this.handleChange}
| ^  24 |     />
25 |   );
26 | });

我遵循一个教程，完全相同的代码适用于他们，但不适用于我。我哪里做错了？

类应用程序扩展组件{
class App extends Component {
  constructor() {
    super();
    this.state = {
      todos: ToDoData,
    };

    this.handleChange = this.handleChange.bind(this);
  }

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

  render() {
    const _this = this;
    const ToDoItems = this.state.todos.map(function (content) {
      return (
        <ToDoItem
          key={content.id}
          content={content}
          handleChange={_this.handleChange}
        />
      );
    });

    return <div>{ToDoItems}</div>;
  }
}

构造函数（）{
超级（）；
此.state={
todos:ToDoData，
};
this.handleChange=this.handleChange.bind（this）；
}
手柄更换（id）{
控制台日志（“已更改”，id）；
}
render（）{
常数this=这个；
const ToDoItems=this.state.todos.map（函数（内容））{
返回(
);
});
返回{ToDoItems}；
}
}

您需要添加

this.handleChange=this.handleChange.bind（this）

并将其保存到该变量中，因为无法在回调中访问它。

类应用程序扩展组件{
构造函数（）{
超级（）；
此.state={
todos:ToDoData，
};
this.handleChange=this.handleChange.bind（this）；
}
手柄更换（id）{
控制台日志（“已更改”，id）；
}
render（）{
常数this=这个；
const ToDoItems=this.state.todos.map（函数（内容））{
返回(
);
});
返回{ToDoItems}；
}
}

---

您需要添加

this.handleChange=this.handleChange.bind（this）

并将其保存到此变量中，因为无法在回调中访问此变量。

这似乎是一个范围问题-经典的JS“this”难题

尝试交换：

const ToDoItems=this.state.todos.map（函数（内容）{

到

const ToDoItems=this.state.todos.map（（内容）=>{

---

这种方法将“This”保留在范围内

这似乎是一个范围问题——经典的JS“This”困境

尝试交换：

const ToDoItems=this.state.todos.map（函数（内容）{

到

const ToDoItems=this.state.todos.map（（内容）=>{

---

这种方法将使“This”保持在范围内。我不敢相信这是一个如此简单的问题。我认为函数和箭头函数是相等的。我从来没有注意到。太好了。如果它对你有效，请确保将投票/标记为正确，让其他人知道它是正确的。实际上这是一个相当棘手的问题——“This”在JS中，PITA是臭名昭著的。我们的函数为我们提供了一种绕过它们的方法。我们也可以通过handleChange={u this.handleChange}来处理它？或者那不起作用？这种方法可以起作用（但你需要在某个地方定义

\u this=this

。我会说这种方法是ES6之前的方法（这是一种变通方法）.我会使用箭头函数或绑定（如另一个答案中所述）我真不敢相信这是一个如此简单的问题。我认为函数和箭头函数是相等的。我从来没有注意到。太好了。如果它对你有效，请确保将投票/标记为正确，让其他人知道它是正确的。实际上这是一个相当棘手的问题-“这”在JS中，PITA是臭名昭著的。我们的函数为我们提供了一种绕过它们的方法。我们也可以通过handleChange={u this.handleChange}来处理它？或者那不起作用？这种方法可以起作用（但你需要在某个地方定义

\u this=this

。我会说这种方法是ES6之前的方法（这是一种变通方法）.我会在这个问题上使用箭头函数或绑定（如另一个答案中提到的）

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

    this.handleChange = this.handleChange.bind(this);
  }

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

  render() {
    const _this = this;
    const ToDoItems = this.state.todos.map(function (content) {
      return (
        <ToDoItem
          key={content.id}
          content={content}
          handleChange={_this.handleChange}
        />
      );
    });

    return <div>{ToDoItems}</div>;
  }
}