Я хочу создать кнопку внутри ячейки столбца таблицы реакций - PullRequest
Новая
       23

Я хочу создать кнопку внутри ячейки столбца таблицы реакций

1 голос
/ 26 июня 2019

Я пытаюсь создать эту кнопку, которая хорошо работает, когда я использую функцию 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>
              ))}

Однако теперь я хочу использовать таблицу реагирования для фильтрации дат в порядке времени ивключить другие функции, однако я не могу найти способ добавить эту кнопку и распечатать данные локального 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>

1 Ответ

0 голосов
/ 26 июня 2019

Если вы используете ячейку, не используйте аксессор, когда вы передаете «ячейка» - это оригинальный объект, поэтому «аксессор» не является атрибутом оригинала, измените его на имя этого аксессора в этом случае «имя»"... Хитро, пример ниже 

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;
...