我想在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>

Answer 1

我意识到这有点旧了，但我也遇到了同样的问题，这就是我解决它的方法。我使用单元格属性来获取行，然后值对象应该具有您正在寻找的访问器（在您的案例名称中）。这是您的示例中的样子：

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

Answer 2

如果您使用 Cell，请不要使用访问器，当您传递“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;

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,
        }

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

Answer 4

阅读这篇文章在这里！ 这对我来说很有效！