我想在反应表列的单元格内创建一个按钮

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

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

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 文档的 Cell Properties 的链接：https : //github.com/tannerlinsley/react-table/blob/master/docs/api/useTable.md#cell-properties

Answer 2

如果您使用 Cell，请勿使用访问器，当您传递“cell”是原始对象时，因此“访问器”不是原始对象的属性，请将其更改为该访问器的名称，在本例中为“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;