React类组件中map内子组件的自定义删除函数无法正常工作

你的问题核心是TodoItem组件中handleDelete方法的this指向丢失，导致无法读取this.props.onDelete。以下是几种直接有效的解决方法：

方法1：在TodoItem的构造函数中绑定this #

在TodoItem组件的构造函数里，手动将handleDelete的this绑定到组件实例：

class TodoItem extends React.Component {
  constructor(props) {
    super(props);
    // 绑定this到组件实例
    this.handleDelete = this.handleDelete.bind(this);
  }

  handleDelete() {
    this.props.onDelete(this.props.item.id); // 假设item有唯一id用于删除
  }

  render() {
    return (
      <div>
        <span>{this.props.item.text}</span>
        <button onClick={this.handleDelete}>删除</button>
      </div>
    );
  }
}

方法2：用箭头函数定义handleDelete #

箭头函数会自动继承外层作用域的this，直接用箭头函数定义类方法即可：

class TodoItem extends React.Component {
  // 箭头函数自动绑定this到组件实例
  handleDelete = () => {
    this.props.onDelete(this.props.item.id);
  };

  render() {
    return (
      <div>
        <span>{this.props.item.text}</span>
        <button onClick={this.handleDelete}>删除</button>
      </div>
    );
  }
}

方法3：在按钮的onClick中使用箭头函数调用 #

如果不想修改方法定义，也可以在点击事件里直接用箭头函数包裹调用：

class TodoItem extends React.Component {
  handleDelete() {
    this.props.onDelete(this.props.item.id);
  }

  render() {
    return (
      <div>
        <span>{this.props.item.text}</span>
        {/* 箭头函数确保this指向TodoItem实例 */}
        <button onClick={() => this.handleDelete()}>删除</button>
      </div>
    );
  }
}

你之前在父组件map里绑定的this，只是确保父组件渲染时的this指向正确，但子组件自己的方法handleDelete并没有绑定this，所以点击时this会变成undefined（React类组件在严格模式下运行，普通函数方法的this默认不是组件实例）。以上任意一种方法都能解决这个问题。

内容的提问来源于stack exchange，提问作者Alim Gölcük