时间戳

首页 > 解决方案 > 如何在反应表中将数据作为参数传递？

reactjs - 如何在反应表中将数据作为参数传递？

问题描述

如何在 React Table 版本 7 中将数据值作为参数传递。

我试图在butFunction反应表内部传递状态和 id，以便我可以创建一个函数来创建一个与状态相反的按钮。

这是我试图这样做的代码。

相同代码的演示链接


const data = [
  { firstName: "Jane", lastName: "Doe", status: "OPEN" , id: "1" },
  { firstName: "John", lastName: "Smith", status: "CLOSE"  , id: "2" },
  { firstName: "John", lastName: "Walker", status: "OPEN" , id: "3" }
];

const columns = [
      {
        Header: "First Name",
        accessor: "firstName"
      },
      {
        Header: "Last Name",
        accessor: "lastName"
      },
      {
        Header: "Status",
        accessor: "status"
      }
];

const Table = ({ columns, data }) => {
  const {
    getTableProps,
    getTableBodyProps,
    headerGroups,
    rows,
    prepareRow
  } = useTable({
    columns,
    data
  });

    const butFunction = (level , id) => {
      console.log(level)
      console.log(id)
    if (level === "OPEN") {
      return <button > CLOSE </button>;
    } else {
      return <button > OPEN </button>;
    }
  };

  return (
    <table {...getTableProps()}>
      <thead>
        {headerGroups.map(headerGroup => (
          <tr {...headerGroup.getHeaderGroupProps()}>
            {headerGroup.headers.map(column => (
              <th {...column.getHeaderProps()}>{column.render("Header")}</th>
            ))}
            <th>Action</th>
          </tr>
        ))}
      </thead>
      <tbody {...getTableBodyProps()}>
        {rows.map((row, i) => {
          prepareRow(row);
          return (
            <tr {...row.getRowProps()}>
              {row.cells.map(cell => {
                return <td {...cell.getCellProps()}>{cell.render("Cell")}</td>;
              })}
              <td>{butFunction(data.status, data.id)}</td>
            </tr>
          );
        })}
      </tbody>
    </table>
  );
};

export default function App() {
  return (
    <div className="App">
      <Table columns={columns} data={data} />
    </div>
  );
}

标签： reactjs

解决方案

您需要访问row.values以访问每一行的数据。在map函数内部，row.values将是一个包含当前行数据的对象。

编辑：

根据您的评论，row.values对象不包含id您的数据对象的属性。要访问id，请使用row.original.id

<td>{ butFunction(row.values.status, row.original.id) }</td>

推荐阅读