React：如何在renderBody中为按钮绑定onClick实现删除功能

核心问题原因 #

你遇到的undefined handleDelete错误，本质是renderBody函数的上下文（this）指向不对，或者没有把主组件的handleDelete正确传递到Table组件的renderBody调用场景中。

具体解决方案 #

1. 确保主组件正确传递handleDelete到Table组件 #

在Trials主组件渲染Table时，把handleDelete作为props传进去：

// Trials组件内部
<Table
  data={trialData}
  renderBody={this.renderBody}
  handleDelete={this.handleDelete}
  // 其他分页/表格配置props
/>

2. 绑定renderBody的上下文（类组件场景） #

如果是类组件，要保证renderBody里的this指向Trials组件本身，有两种方式：

• 构造函数绑定（推荐，性能更优）：

// Trials组件的构造函数
constructor(props) {
  super(props);
  this.handleDelete = this.handleDelete.bind(this);
  this.renderBody = this.renderBody.bind(this);
}

• 箭头函数定义renderBody：

// Trials组件内直接定义
renderBody = (item) => {
  return (
    <tr>
      {/* 其他列渲染 */}
      <td>
        <button onClick={() => this.handleDelete(item.id)}>删除</button>
      </td>
    </tr>
  );
}

3. 在Table组件中传递handleDelete给renderBody #

如果Table组件内部是循环调用renderBody渲染每一行，需要把handleDelete作为参数传给renderBody：

// Table组件内部渲染行的逻辑
{this.props.data.map((item, index) => (
  <tr key={index}>
    {this.props.renderBody(item, this.props.handleDelete)}
  </tr>
))}

然后在Trials的renderBody里接收参数并使用：

// Trials组件的renderBody方法
renderBody(item, handleDelete) {
  return (
    <>
      {/* 其他列内容 */}
      <td>
        <button onClick={() => handleDelete(item.id)}>删除</button>
      </td>
    </>
  );
}

4. 函数组件场景优化 #

如果是函数组件，用useCallback缓存handleDelete，避免不必要的重渲染：

// Trials函数组件
import { useCallback } from 'react';

const Trials = () => {
  const handleDelete = useCallback((id) => {
    // 你的删除逻辑
  }, []);

  const renderBody = (item) => {
    return (
      <td>
        <button onClick={() => handleDelete(item.id)}>删除</button>
      </td>
    );
  };

  return <Table data={data} renderBody={renderBody} />;
};

内容的提问来源于stack exchange，提问作者Julius Peter Odeke