Перенаправление с помощью React-router-dom и react-table.

Я пытаюсь сделать перенаправление внутри функции onclick в React-table. Когда вы смотрите на onRowClick, он регистрирует имя заголовка, который отлично работает. Но когда я пытаюсь использовать перенаправление после клика, ничего не происходит. Код работает после того, как я попробовал его в другом компоненте. Мне интересно, является ли это проблемой с реагирующей таблицей, и есть ли другой способ сделать это?

То, что я пытаюсь сделать, это перенаправление 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;

reactjs react-router-dom react-table
person Jeffrey Yourman    schedule 15.05.2018    source источник

Ответы (2)


arrow_upward
0
arrow_downward

Я потерял некоторое время, чтобы понять. Мой ответ основан на этом ответе. Я не знаю, лучшее ли это решение, но я использую SubComponent и использовал там Redirect. Не забудьте функцию «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>
        );
      }}
person vassilis ntovantzis    schedule 16.07.2019

arrow_upward
0
arrow_downward

У вас есть 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
}
person zhuber    schedule 16.07.2019