使用react-data-components渲染表格按钮无法访问外部方法与state求助

兄弟，我之前用react-data-components的时候也踩过这个坑！问题根源很简单：表格列配置里的render函数执行时，上下文（也就是this）并没有指向你的组件实例，所以调用this.handleClick才会报undefined的错。下面给你几个靠谱的解决方案，选一个适合你的就行：

方法一：用Class Fields语法定义箭头函数版的handleClick #

这是最简洁的方式，箭头函数会自动绑定组件的this：

class YourTableComponent extends React.Component {
  // 直接把handleClick定义成箭头函数，this自动指向组件实例
  handleClick = (rowId) => {
    // 这里写你的删除逻辑，比如调用接口或者更新state
    console.log(`准备删除ID为${rowId}的行`);
  };

  render() {
    const columns = [
      // 其他列配置...
      {
        key: 'delete',
        label: '操作',
        // 列的render也用箭头函数，确保这里的this能拿到组件的handleClick
        render: (row) => (
          <button onClick={() => this.handleClick(row.id)}>删除</button>
        )
      }
    ];

    return (
      <Table
        columns={columns}
        data={yourData}
      />
    );
  }
}

方法二：在构造函数中手动绑定this #

如果你的项目还没启用Class Fields语法，就用这种传统方式：

class YourTableComponent extends React.Component {
  constructor(props) {
    super(props);
    // 关键步骤：把handleClick绑定到组件的this
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick(rowId) {
    console.log(`准备删除ID为${rowId}的行`);
  }

  render() {
    const columns = [
      // 其他列...
      {
        key: 'delete',
        label: '操作',
        render: (row) => (
          <button onClick={() => this.handleClick(row.id)}>删除</button>
        )
      }
    ];

    return <Table columns={columns} data={yourData} />;
  }
}

方法三：给列的render函数绑定this #

如果你不想改handleClick的定义，也可以直接把列配置里的render函数绑定到组件的this：

class YourTableComponent extends React.Component {
  handleClick(rowId) {
    console.log(`准备删除ID为${rowId}的行`);
  }

  render() {
    const columns = [
      // 其他列...
      {
        key: 'delete',
        label: '操作',
        // 用bind把render函数的this绑定到组件实例
        render: function(row) {
          return <button onClick={() => this.handleClick(row.id)}>删除</button>;
        }.bind(this)
      }
    ];

    return <Table columns={columns} data={yourData} />;
  }
}

这三种方法都能解决问题，个人推荐第一种，代码最简洁易懂。另外要注意，如果你是用函数组件的话，直接定义函数然后在onClick里调用就行，不需要考虑this绑定的问题~

内容的提问来源于stack exchange，提问作者Justin Curious