React.js Material-Table将选定的行传递到另一个页面

如何解决React.js Material-Table将选定的行传递到另一个页面

如何通过传递选择的行数据作为道具来重定向到另一页？

我正在使用物料表，我想在单击“导出”按钮后将选定的行数据传递到另一页，因此我可以使用该数据在另一页中创建某种报告。

我认为我应该使用history.push（）方法，但是它在onClick方法中不起作用。有人可以给我任何提示吗？

import React from 'react'
import MaterialTable from 'material-table';

class LeadTable extends React.Component{
    constructor(props) {  
      super(props);
      this.state = { 
        leads : [],};
    }
  
    componentDidMount() {
      fetch('http://localhost:5000/api/Leads')
      .then(res => res.json())
      .then((data) => {
        // console.log('Data: ',data[0])
        this.setState({
          leads: data[0]
        })
      })
      .catch(console.log);
    }

    redirectToReport = () => {
      const { history } = this.props;
      history.push('report');
    }

    render(){
      return (
        <div style={{ maxWidth: '100%',align: 'center'}}>
          <MaterialTable
            title="Reporting"
            columns={[
              ...
            ]}
            data = {this.state.leads}       
            options={{
              selection: true,filtering: true,sorting: true
            }}
            actions = {[{
              position: "toolbarOnSelect",tooltip: 'Export the selected activities!',icon: 'Export',onClick: (event,rowData) => {
                console.log("Row Data: ",rowData)
                // rowData has all the selected row and I want to redirect to another page with passing those data.
              }
            }]}
          />
        </div>
    )}
}

export default LeadTable

解决方法

_{此答案主要针对使用类组件的OP的代码库。如果您使用的是功能组件，则可以使用useHistory}

之类的react-router hooks

---

使用withRouter HOC启用LeadTable组件对history的访问，以便您可以push

const LeadTableWithRouter = withRouter(LeadTable);

将对象传递给push函数以传递行数据

redirectToReport = (rowData) => {
  const { history } = this.props;
  history.push({
    pathname: "/report",// re-route to this path
    state: { name: rowData.name,surname: rowData.surname } // your row data
  });
};

在您的其他组件中，使用this.props.location.state.<data_name>访问您已传递的行数据

class AnotherPage extends React.Component {
  render() {
    return (
      <>
        <p>{this.props.location.state.name}</p>
        <p>{this.props.location.state.surname}</p>
        <Link to="/">go back</Link>
      </>
    );
  }
}