我想在 react-table 列的单元格内创建一个按钮。

Question

我试图创建一个在使用map()函数时能够良好运作的按钮:

{bands.events.map((group, i) => (
                <tr key={i}>
                  <td>{group.start}</td>
                  <td>
                    {" "}
                    <button value={group.name} onClick={props.handleClickGroup}>
                      {group.name}
                    </button>
                  </td>
                </tr>
              ))}

然而，现在我想使用 react-table 来按时间顺序过滤日期并启用其他功能，但我似乎找不到添加此按钮并在按钮元素中打印本地 JSON 数据的方法。这是我的代码：

import React from "react";
import ReactTable from "react-table";
import "react-table/react-table.css";

var bands = require("../festivals/bands.json");

const FestivalTable = props => {
  const columns = [
    {
      width: 200,
      Header: "Time",
      accessor: "start"
    },
    {
      width: 300,
      Header: "Artist Name",
      accessor: "name",
      Cell: cell => (
        <button value={cell.accessor} onClick={props.handleClickGroup}>
          {cell.accessor}
        </button>
      )
    }
  ];

  return (
    <ReactTable
      data={bands.events}
      columns={columns}
      minRows={0}
      showPagination={false}
      //getTdProps={bands.events}
    />
  );
};

export default FestivalTable;

在父组件中，我放置了以下内容：

<div className="table-wrap">
        <FestivalTable handleClickGroup={props.handleClickGroup} />
      </div>

- artworkjpm

Answer 1

我知道这篇文章有点老了，但是我也遇到了同样的问题，并且这是我的解决方法。 我使用cell属性来获取行，然后values对象应该具有您要查找的访问器 (在您的情况下是name)。以下是在您的示例中的代码示例：

import React from "react";
import ReactTable from "react-table";
import "react-table/react-table.css";

var bands = require("../festivals/bands.json");

const FestivalTable = props => {
  const columns = [
    {
      width: 200,
      Header: "Time",
      accessor: "start"
    },
    {
      width: 300,
      Header: "Artist Name",
      accessor: "name",
      Cell: ({ cell }) => (
        <button value={cell.row.values.name} onClick={props.handleClickGroup}>
          {cell.row.values.name}
        </button>
      )
    }
  ];

  return (
    <ReactTable
      data={bands.events}
      columns={columns}
      minRows={0}
      showPagination={false}
      //getTdProps={bands.events}
    />
  );
};

export default FestivalTable;

这里是 React-table API 文档中单元格属性的链接：https://github.com/tannerlinsley/react-table/blob/master/docs/api/useTable.md#cell-properties

- Redbeard

Answer 2

如果您使用Cell，请不要使用accessor。当您传递"cell"时，它是原始对象，因此"accessor"不是原始对象的属性。在这种情况下将其更改为访问器的名称，即"name" ... 有点棘手，示例如下。

import React from "react";
import ReactTable from "react-table";
import "react-table/react-table.css";

var bands = require("../festivals/bands.json");

const FestivalTable = props => {
  const columns = [
    {
      width: 200,
      Header: "Time",
      accessor: "start"
    },
    {
      width: 300,
      Header: "Artist Name",
      Cell: ({ original }) => (
        <button value={original.name} onClick={props.handleClickGroup}>
          {original.name}
        </button>
      )
    }
  ];

  return (
    <ReactTable
      data={bands.events}
      columns={columns}
      minRows={0}
      showPagination={false}
      //getTdProps={bands.events}
    />
  );
};

export default FestivalTable;

- Juan Velasquez

---

对我没用，我得到了“TypeError：无法读取未定义的属性'name'”。<button value={cell.name} onClick={props.handleClickGroup}> | ^ 20 | {cell.name} 21 | </button> - artworkjpm

尝试使用“original”更新答案：https://dev59.com/G1cO5IYBdhLWcg3wWQOa - Juan Velasquez

Answer 3

React-Bootstrap-Table-Next v4.0.3

AddButtonToCell = (cell) =>{
            return(<button value={cell} onClick={props.handleClickGroup}>
              {cell}
            </button>)
}    

const columns = [
        {
          width: 300,
          Header: "Artist Name",
          accessor: "name",
          formatter: this.AddButtonToCell,
        }

（未针对您的情况进行测试） 尝试使用此代码。在特定列的每个单元格中添加按钮。

- Hem M