React JS中如何在React Table的onClick点击事件中获取cell属性值

问题原因 #

你当前向handleClick传入的是cell.getCellProps()的返回值，这个方法仅返回单元格的DOM属性配置对象，不包含行的业务数据，因此无法获取到studentid字段。

解决方案 #

React Table的cell实例本身就绑定了所属行的完整数据，你可以直接从cell.row.original取到当前行的原始业务数据，修改代码如下：

1. 修改Actions列的删除按钮绑定逻辑

{
  Header: "Actions",
  Cell: ({ cell }) => (
    <span>
      <button>Edit</button>
      <button onClick={() => handleClick(cell.row.original.studentid)}>
        Delete
      </button>
    </span>
  )
}

2. 修改handleClick接收参数

const handleClick = (studentId) => {
  alert("clicked " + studentId);
  console.log(studentId);
  // 后续直接用studentId调用删除接口即可
}

补充说明：cell.row是当前行的React Table实例对象，cell.row.original对应你渲染表格时传入的数据源数组里的单条原始数据，直接包含studentid、name、address等你定义的业务字段。

内容的提问来源于stack exchange，提问作者Akshay Gireesh