如何在React表格中使列数据可点击？

Question

我正在使用React Table（React Bootstrap Table-2）在页面上显示一个表格，并使用数据库API中的数据填充它。我想将其中一列显示的值作为链接（hrefs）。这个特定的列只包含URL。我的目标是，如果我点击每行的url（“show report”），它应该在新标签页中打开相应的行ID。如何在React Bootstrap Table-2中实现这一点？

我尝试过：

{
datafield : "report",
text : "Show report",
accessor : "link",
Cell : (e) => <a href={e.value}> {e.value} </a>
},

import React, { useState, useEffect } from "react";
import logo from "./logo.svg";
import "./App.css";
import axios from "axios";
import BootstrapTable from "react-bootstrap-table-next";
import paginationFactory from "react-bootstrap-table2-paginator";
import * as ReactBootstrap from "react-bootstrap";
import filterFactory, { textFilter } from "react-bootstrap-table2-filter";
import ToolkitProvider, { Search } from "react-bootstrap-table2-toolkit";

const App = () => {
  const [list, setList] = useState([]);
  const [loading, setLoading] = useState(false);
  const { SearchBar } = Search;

  const getListData = async () => {
    try {
      const data = await axios.get("http://localhost:4000/results");
      console.log(data);
      setList(data.data);
      setLoading(true);
    } catch (e) {
      console.log(e);
    }
  };

  const columns = [
    { dataField: "dept_name", text: "DepartMent" },
    { dataField: "Tr_type", text: "Transmission Type", sort: true },
    { dataField: "E_type", text: "Entry Type", sort: true },
    { dataField: "Msg_des", text: "Message Description", sort: true },
    { dataField: "cr_date", text: "Created Date", sort: true },
    { dataField: "ch", text: "Channel", sort: true },
    { dataField: "Del", text: "Delivered", sort: true },
    { dataField: "fl", text: "Failed", sort: true },
    {
      dataField: "report",
      text: "Show Detailed Report",
    },
  ];
  
  useEffect(() => {
    getListData();
  }, []);

  return (
    <div className="App">
      {loading ? (
        <ToolkitProvider keyField="name" data={list} columns={columns} search>
          {(props) => (
            <div>
              <div className="serSec">
                <h3 className="hdrOne">Search:</h3>
                <SearchBar {...props.searchProps} />
              </div>

              <div class="table-responsive">
                <BootstrapTable
                  {...props.baseProps}
                  filter={filterFactory()}
                  pagination={paginationFactory()}
                  
                />
              </div>
            </div>
          )}
        </ToolkitProvider>
      ) : (
        <ReactBootstrap.Spinner animation="border" />
      )}
    </div>
  );
};

export default App;

- Thomas Martin

Answer 1

列数据添加如下：

{
  dataField : "report",
  text : "Show report",,
  formatter: (cell, row) => <a href={cell}> {cell} </a>
}

- Winky

---

嘿，谢谢回复。感谢格式化程序，现在我该如何在“显示报告”每次点击时传递相应的行ID，以便将所需列值作为链接。我的目标是，如果我单击每行的“显示报告”，它应该打开一个带有相应行ID的新选项卡。 - Thomas Martin

row 将会是一个对象，你将会在其中一个键或者嵌套的另一个键中获取到 id。 - kiranvj

正如@kiranvj所说，格式化函数需要更改，添加例如row.id (formatter: (cell, row) => <a href={cell + row.id}> {cell} </a>)。 - Winky

这是文档。 - Winky