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

Answer 2

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 3

如果您使用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;

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

3 个答案: