我正在尝试在React-table中的onclick函数内部进行重定向。当您查看onRowClick时,它会记录完美的标头名称。但是当我尝试使用重定向后,点击没有任何反应。我在另一个组件中尝试后,代码可以运行。我想知道这是否是react-table的一个问题,如果有另一种方法可以做到这一点?
我要做的是onclick重定向到附有patientinfo组件的路由。
import React, { Component } from 'react';
import { highRiskPatientData } from '.././dummydata/HighRiskPatientComp';
import '.././styles/HighRiskPatientComp.css';
import ReactTable from 'react-table/lib';
import "react-table/react-table.css";
import "babel-polyfill";
import PatientInfo from './PatientInfo';
import { Redirect } from 'react-router-dom';
class HighRiskPatientComponent extends Component {
// constructor() {
// super();
// }
render() {
const onRowClick = (state, rowInfo, column, instance) => {
return {
onClick: e => {
console.log('It was in this column:', column.Header);
<Redirect to="/patientinfo"/>
}
}
}
return (
<div className="container-fluid">
<div className="row">
<div className="col-md-6 HighRiskHeaderDiv">
<h5 className="HighRiskHeader">High Risk Patients</h5>
</div>
<div className="col-md-6 btnSettingsDiv">
<button type="button" className="btn btnSettings"
value="Submit">Settings</button>
</div>
</div>
<ReactTable
data={highRiskPatientData.data}
columns={[
{
columns: [
{
Header: "Name",
accessor: "name"
},
{
Header: "Current PRF Status",
accessor: "currentPRFStatus"
},
{
Header: "Review On",
accessor: "reviewOn"
},
{
Header: "Due/Overdue",
accessor: "DueOverdue"
},
{
Header: "Facility",
accessor: "Facility"
},
{
Header: "Last Discharge",
accessor: "lastDischarge"
},
{
Header: "Last MHA Appt",
accessor: "lastMHAppt"
},
{
Header: "Next MHA Appt",
accessor: "nextMHAppt"
},
{
Header: "On Track",
accessor: "onTrack"
},
{
Header: "Last Safety Plan",
accessor: "lastSafetyPlan"
},
{
Header: "Done in 7 Days",
accessor: "doneIn7Days"
},
{
Header: "Last Compreh. Risk Assess",
accessor: "lastCompRiskAssess"
},
{
Header: "PHQ-9 Score",
accessor: "phqDash9Score"
},
{
Header: "PHQ-9 date",
accessor: "phqDash9Score"
},
{
Header: "Trend",
accessor: "trend"
}
]
}
]}
defaultPageSize={8}
className="-highlight"
getTdProps={onRowClick}
/>
</div>
);
}
}
export default HighRiskPatientComponent;
答案 0 :(得分:0)
我花了一些时间弄清楚。我的答案基于this答案。 我不知道这是否是最好的解决方案,但我正在使用SubComponent并在其中使用了重定向。 不要忘记“ expand_row”功能和“ expanded = {this.state.expanded}”。
getTdProps={(state, rowInfo) => {
return {
onClick: e => {
this.expand_row(rowInfo);
}
};
}}
SubComponent={d => {
return (
<div>
<Redirect
to={{
pathname: "transaction",
accountId: d.original._id
}}
/>
</div>
);
}}
答案 1 :(得分:0)
您有2种选择可以实现这一目标:
使用历史记录对象
onClick: e => {
console.log('It was in this column:', column.Header);
this.props.history.push("/patientinfo");
}
使用重定向组件。如果要使用redirect
组件,则需要将其包括在render
函数中,而不是已实现的onClick
方法中。但是为了知道何时渲染(实际重定向),您需要在单击行时更改状态,如下所示:
onClick: e => {
console.log('It was in this column:', column.Header);
this.setState({ navigatePatientInfo: true });
}
然后在您的渲染方法中:
render() {
if (this.state.navigatePatientInfo) {
return <Redirect to="/patientinfo"/>
}
// .. your code
}