React中如何让列配置调用组件内定义的delete函数？

问题原因 #

你之前的写法失效，核心原因是外部常量ObjectEx中的action函数里的this并不指向ObjectCategory组件实例，导致this.delete无法找到组件内的方法。

解决方法 #

以下提供两种可行的实现方式，根据你的业务场景选择：

方式一：在组件内动态生成列配置

把列配置移到组件内部，确保action函数能捕获到组件的this上下文：

export default class ObjectCategory extends Component {
    constructor(props) {
      super(props)
      // 提前绑定delete方法，避免每次render创建新函数（可选但推荐）
      this.delete = this.delete.bind(this);
      
      // 在组件内定义列配置，确保this指向当前组件实例
      this.columns = [
        {
          name: "Test1",
          field: "Test1",
          edit: true,
          action: (cellProps) => {
            // 直接通过this调用组件内的delete方法，可传入cellProps获取行数据
            return (<div><Icon name="Delete" onClick={() => this.delete(cellProps)} /></div>)
          }
        }
      ];
    }

    delete(cellProps) {
       // 这里可以通过cellProps获取当前行的数据，比如cellProps.row
       // 执行删除操作逻辑
       console.log("删除目标行数据：", cellProps.row);
    }

    render() {
       return (
           <div>
               {/* 假设你的表格组件为Grid，传入动态生成的columns */}
               <Grid columns={this.columns} data={yourDataSource} />
           </div>
       )
    }
}

方式二：保留外部列配置，传递方法到表格组件

如果必须保留外部的ObjectEx常量，可通过表格组件的props把组件内的delete方法传递给列的action函数：

1. 外部列配置（无需修改this，改为从cellProps取方法）：

export const ObjectEx = [
{
    name: "Test1",
    field: "Test1",
    edit: true,
    action: (cellProps) => {
       // 从cellProps中获取组件传递过来的delete处理方法
       return (<div><Icon name="Delete" onClick={() => cellProps.deleteHandler(cellProps)} /></div>)
    }
}
]

2. 组件内传递方法并渲染表格：

export default class ObjectCategory extends Component {
    constructor(props) {
      super(props)
      this.delete = this.delete.bind(this);
    }

    delete(cellProps) {
       // 执行删除操作逻辑
    }

    render() {
       return (
           <div>
               {/* 通过表格组件的props传递delete方法，让cellProps能访问到 */}
               <Grid 
                   columns={ObjectEx} 
                   data={yourDataSource} 
                   // 自定义cellProps，注入deleteHandler方法
                   cellProps={{ deleteHandler: this.delete }} 
               />
           </div>
       )
    }
}

注意事项 #

• 如果你的表格组件不支持自定义cellProps，可以查看其文档，通常会提供类似onAction的回调属性，或者允许在列配置中传入额外参数。
• 绑定this的方式除了在constructor里用bind，也可以使用类字段语法（delete = () => {}）来自动绑定上下文。

内容的提问来源于stack exchange，提问作者jallipalli phanindra