Javascript 事件侦听器可以'；无法访问我的handleChange功能

App.js（父组件）

从“React”导入React；
从“/TodoItem”导入TodoItem；
从“/todosData”导入todosData；
导入“/styles.css”；
类应用程序扩展了React.Component{
构造函数（）{
超级（）；
此.state={
todos:todosData
};
this.handleChange=this.handleChange.bind（this）；
}
手柄更换（id）{
log（`${id}单击！`）；
}
render（）{
const todoItems=this.state.todos.map（函数（项）{
返回(
);
});
返回{todoItems}；
}
}
导出默认应用程序；

TodoItem.js（子组件）

从“React”导入React；
功能待办事项（道具）{
返回(
props.handleChange（props.item.id）}//问题行
/>
{props.text}

);
}
将默认值导出到doitem；

返回以下内容：

控制台：无法使用错误：错误{}

问题：props.handleChange不是一个函数

我使用了绑定，并测试了handleChange（）的定义是否正确。正在读取其他道具，但props.handleChange未被读取。

类TestTodo扩展React.Component{
class TestTodo extends React.Component {

    state = {
      todos: todosData
    };
  

  handleChange = (id) => {
    console.log(`${id} Clicked!`);
  }

  render() {

    const todoItems = this.state.todos.map( item=> {
      return (
        <TodoItem
          key={item.id}
          text={item.text}
          completed={item.completed}
          item={item}
          handleChange={this.handleChange}
        />
      );
    });
    return <div className="todo-list">{todoItems}</div>;
  }
}

export default TestTodo;


import React from "react";

const  TodoItem = props => {
    const handleChange = () =>{
        props.handleChange(props.item.id)
    }

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

export default TodoItem;

状态={
todos:todosData
};
handleChange=（id）=>{
log（`${id}单击！`）；
}
render（）{
const todoItems=this.state.todos.map（项=>{
返回(
);
});
返回{todoItems}；
}
}
导出默认TestTodo；
从“React”导入React；
const TodoItem=道具=>{
常量handleChange=（）=>{
props.handleChange（props.item.id）
}
返回(
{props.text}

);
}
将默认值导出到doitem；

类TestTodo扩展React.Component{
状态={
todos:todosData
};
handleChange=（id）=>{
log（`${id}单击！`）；
}
render（）{
const todoItems=this.state.todos.map（项=>{
返回(
);
});
返回{todoItems}；
}
}
导出默认TestTodo；
从“React”导入React；
const TodoItem=道具=>{
常量handleChange=（）=>{
props.handleChange（props.item.id）
}
返回(
{props.text}

);
}
将默认值导出到doitem；

您的问题在于：

const todoItems = this.state.todos.map(function (item) {
  return (
    <TodoItem
      key={item.id}
      text={item.text}
      completed={item.completed}
      item={item}
      handleChange={this.handleChange}
    />
  );
});

const todoItems=this.state.todos.map（函数（项）{
返回(
);
});

当您在这里说this.handleChange时，您正试图从在映射中接收“item”的函数中获取handleChange。该函数中未定义handleChange

因此，您需要将接收项的函数更改为箭头函数，该函数作为外部函数的箭头函数。像这样：

const todoItems = this.state.todos.map(item => 
        <TodoItem
          key={item.id}
          text={item.text}
          completed={item.completed}
          item={item}
          handleChange={this.handleChange}
        />
      );

const todoItems=this.state.todos.map（项=>
);

您的问题在于：

const todoItems = this.state.todos.map(function (item) {
  return (
    <TodoItem
      key={item.id}
      text={item.text}
      completed={item.completed}
      item={item}
      handleChange={this.handleChange}
    />
  );
});

const todoItems=this.state.todos.map（函数（项）{
返回(
);
});

当您在这里说this.handleChange时，您正试图从在映射中接收“item”的函数中获取handleChange。该函数中未定义handleChange

因此，您需要将接收项的函数更改为箭头函数，该函数作为外部函数的箭头函数。像这样：

const todoItems = this.state.todos.map(item => 
        <TodoItem
          key={item.id}
          text={item.text}
          completed={item.completed}
          item={item}
          handleChange={this.handleChange}
        />
      );

const todoItems=this.state.todos.map（项=>
);

您需要绑定map函数或使用arrow函数。因为在这种情况下，

'this.handleChange'

中的

this

引用了映射的回调函数，而不是类，这就是它为什么给您

未定义的
。所以你有两个解决这个问题的方法

soln#1：箭头功能

render() {
        const todoItems = this.state.todos.map( (item) => {
          return (
            <TodoItem
              key={item.id}
              text={item.text}
              completed={item.completed}
              item={item}
              handleChange={this.handleChange}
            />
          );
        });
        return <div className="todo-list">{todoItems}</div>;
     }

render() {
        const todoItems = this.state.todos.map( function(item) {
          return (
            <TodoItem
              key={item.id}
              text={item.text}
              completed={item.completed}
              item={item}
              handleChange={this.handleChange}
            />
          );
        }.bind(this));
        return <div className="todo-list">{todoItems}</div>;
     }

render（）{
const todoItems=this.state.todos.map（（项）=>{
返回(
);
});
返回{todoItems}；
}

soln#2:bind map的回调函数

render() {
        const todoItems = this.state.todos.map( (item) => {
          return (
            <TodoItem
              key={item.id}
              text={item.text}
              completed={item.completed}
              item={item}
              handleChange={this.handleChange}
            />
          );
        });
        return <div className="todo-list">{todoItems}</div>;
     }

render() {
        const todoItems = this.state.todos.map( function(item) {
          return (
            <TodoItem
              key={item.id}
              text={item.text}
              completed={item.completed}
              item={item}
              handleChange={this.handleChange}
            />
          );
        }.bind(this));
        return <div className="todo-list">{todoItems}</div>;
     }

render（）{
const todoItems=this.state.todos.map（函数（项）{
返回(
);
}.约束（这个）；
返回{todoItems}；
}
您需要绑定map函数或使用arrow函数。因为在这种情况下，
'this.handleChange'
中的
this
引用了映射的回调函数，而不是类，这就是它为什么给您
未定义的
。所以你有两个解决这个问题的方法

soln#1：箭头功能

render() {
        const todoItems = this.state.todos.map( (item) => {
          return (
            <TodoItem
              key={item.id}
              text={item.text}
              completed={item.completed}
              item={item}
              handleChange={this.handleChange}
            />
          );
        });
        return <div className="todo-list">{todoItems}</div>;
     }

render() {
        const todoItems = this.state.todos.map( function(item) {
          return (
            <TodoItem
              key={item.id}
              text={item.text}
              completed={item.completed}
              item={item}
              handleChange={this.handleChange}
            />
          );
        }.bind(this));
        return <div className="todo-list">{todoItems}</div>;
     }

render（）{
const todoItems=this.state.todos.map（（项）=>{
返回(
);
});
返回{todoItems}；
}

soln#2:bind map的回调函数

render() {
        const todoItems = this.state.todos.map( (item) => {
          return (
            <TodoItem
              key={item.id}
              text={item.text}
              completed={item.completed}
              item={item}
              handleChange={this.handleChange}
            />
          );
        });
        return <div className="todo-list">{todoItems}</div>;
     }

render() {
        const todoItems = this.state.todos.map( function(item) {
          return (
            <TodoItem
              key={item.id}
              text={item.text}
              completed={item.completed}
              item={item}
              handleChange={this.handleChange}
            />
          );
        }.bind(this));
        return <div className="todo-list">{todoItems}</div>;
     }

render（）{
const todoItems=this.state.todos.map（函数（项）{
返回(
);
}.约束（这个）；
返回{todoItems}；
}
只需将返回函数更改为使用箭头函数，如：


render（）{
const todoItems=this.state.todos.map（（项）=>{
返回(
);
});
返回{todoItems}；
}
只需将返回函数更改为使用箭头函数，如：


render（）{
const todoItems=this.state.todos.map（（项）=>{
返回(
);
});
返回{todoItems}；
}

handleChange（）直接在App.js中我的构造函数下方定义。App是一个类。handleChange（）直接在App.js中我的构造函数下面定义。应用程序是一个类。谢谢，它工作！React是否只适用于ES6语法？我认为这是一个范围问题，因为这不是在你在map（）中编写的回调函数中定义的，所以你必须使用ES6语法。你也可以使用此语法来代替const todoItems=This.state.todos.map（函数（项）{return（）；}.bind（This））；返回{todoItems}；}谢谢，它很管用！React是否只适用于ES6语法？我认为这是一个范围问题，因为