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

Posted 2023-02-19

【中文标题】如何使 React 表中的列数据可点击？

【英文标题】：How to make a Column data clickable one in React table?

【发布时间】：2020-11-23 05:49:47

【问题描述】：

我正在使用 React Table (React Bootstrap Table-2) 在页面中显示一个表，并使用来自数据库 API 的数据填充它。我想将其中一列中的值显示为链接（hrefs）。此特定列仅包含 URL。我想要实现的是，如果我点击每行的 url（“显示报告”） - 它应该打开一个带有相应行 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;

【参考方案1】：

列数据添加如下：

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

【讨论】：

谢谢您的回复。感谢格式化程序将所需的列值作为链接现在我如何通过每次单击“显示报告”传递相应的行 ID。我想要实现的是，如果我点击每一行的显示报告 - 它应该打开一个带有相应行 ID 的新标签。

row 将是一个对象，您将在其中一个键中获得 id 或嵌套在另一个键中

正如@kiranvj 所说，格式化程序功能需要更改，添加即row.id (formatter: (cell, row) => cell )

这里是document