如何启用行单击并使用该选定行的以下数据重定向到新选项卡？

Posted 2023-02-22

【中文标题】如何启用行单击并使用该选定行的以下数据重定向到新选项卡？

【英文标题】：How can I enable on row click and redirect to a new tab with the following data of that selected row?

【发布时间】：2021-08-05 03:27:19

【问题描述】：

我正在使用 mui-datatable，如何通过单击一行将用户重定向到另一个页面，并且该行的数据也将传递到该页面？

这是我得到的错误：

DataCloneError: Failed to execute 'pushState' on 'History': Symbol(react.element) could not be cloned.

  constructor() 
    super();
    this.state =  array: [];
  

  columns = [
    "Order ID",
    "Name",
  ];
  options = 
    filter: true,
     onRowClick: (data) => this.props.history.push("/details", data),
  ;

  componentDidMount() 
    try 
    //fetching data from the firestore
     catch (err) 
      console.log(err);
    
  

  render() 
    
    return  (
      <div>
        <MUIDataTable
          title="Pending Orders"
          columns=this.columns
          data=this.state.orders
          options=this.options
        />
        

【问题讨论】：

您可以尝试使用浏览器`localStorage 临时保存行数据，然后在组件卸载时将其清除。 developer.mozilla.org/en-US/docs/Web/API/Window/…

【参考方案1】：

您可以使用 useHistory 挂钩将用户重定向到行数据。 history.push 接受路径和状态（用户想要传递给新路由的数据）作为参数。

/*** BasicTable.js Line number 35 in the sandbox link***/

const history = useHistory();
// rowData is the data of the clicked row.
const handleRowClick = (rowData) => 
   history.push("/nextpage", rowData);
;

要提取状态，您可以使用 useLocation 挂钩。

 const location = useLocation();
 const rowData = location.state;

Sandbox Url

【讨论】：

我已经更新了我的代码，但我得到了一个错误，“DataCloneError: Failed to execute 'pushState' on 'History': Symbol(react.element) could not be clone.”

可以分享MUIDataTable的代码吗？您在哪里调用了选项函数。

我已经编辑了我的帖子。选项函数在渲染之前

我发现了。但我说的是你在 MUIDataTable 中为行编写 onClick 函数的代码片段。

就是这个"onRowClick: (data) => this.props.history.push("/details", data)"