Как перейти на другую страницу, нажав на строку таблицы из таблицы реакций? - PullRequest
Новая
       29

Как перейти на другую страницу, нажав на строку таблицы из таблицы реакций?

0 голосов
/ 10 июля 2019

Я не могу перейти на другую страницу, когда нажимаю на строку таблицы.

Я уже использую функцию getTdProps для получения свойств из строки таблицы, когда я нажимаю на определенную строку - все, что этоработает на это.Проблема в том, что я не знаю, как перейти к другому экрану с помощью «ero-router », когда я получаю событие« onClick ».Я также не хочу использовать функцию «link» из «act-router », так как эта функция выделяет синим цветом слова из таблицы. 

```export default class Lista2 extends Component{
    constructor(){        
        super();
        this.state = {
            list: []
        }                
    }

    componentDidMount() {
        this.getList();       
    }

    getList(){
        axios.put(proxyurl + url, {
            "owner": 2
        }).then(res => {      
            this.setState({ list: res.data})
       })
   }

   render(){ 
        const columnsTable = [
                {
                    Header: "ID",
                    accessor: "id",
                    width: 120,
                },
                {
                    Header: "Setor",
                    accessor: "setor"
                },
                {
                    Header: "Máquina",
                    accessor: "maquina"
                },
                {
                    Header: "Sensor",
                    accessor: "sensor"
                }]

        let tableStyle = {
            //backgroundColor: "#FCFD96",
            marginRight: "auto",
            marginLeft: "auto",
            marginBottom: "20px",
            fontSize: "14px",
            textAlign: "center",
        }

        return( 
            <Main {...headerProps}>
                <div>                              
                    <ReactTable
                        data= {this.state.list}
                        columns={columnsTable}
                        showPaginationBottom= {true}
                        className= "-striped -highlight"
                        style={tableStyle}
                        noDataText = {"Please Wait"}                        
                        getTdProps={(state, rowInfo, column, instance) => {
                            return {
                              onClick: (e, handleOriginal) => {
                                console.log('A Td Element was clicked!')
                                console.log('it produced this event:', e)
                                console.log('It was in this column:', column)
                                console.log('It was in this row:', rowInfo)
                                console.log('It was in this table instance:', instance)
                              }
                            }
                          }}

                    />    
                </div>              
            </Main>
        )        
    }
} ```

Я хотел бы знать, как я могу идтина другой экран, нажав на всю строку из таблицы?Должен ли я вызвать другую функцию?Какую функцию из реакции-маршрутизатора я должен использовать?

Ответы [ 2 ]

1 голос
/ 10 июля 2019

Вы можете использовать history.push из react-router

import { withRouter } from 'react-router'

class Lista2 extends Component {
  ....
  onClick: (e, handleOriginal) => {
    this.props.history.push('some-page')
    console.log('A Td Element was clicked!')
    console.log('it produced this event:', e)
    console.log('It was in this column:', column)
    console.log('It was in this row:', rowInfo)
    console.log('It was in this table instance:', instance)
  }
}

export default withRouter(Lista2)
0 голосов
/ 10 июля 2019

В вашей функции getTdProps вы можете использовать ее для перенаправления на другой маршрут вашего приложения: 

window.location("YOUR_ROUTE");

Пример: 

getTdProps={(state, rowInfo, column, instance) => {
  return {
    onClick: (e, handleOriginal) => {
      window.location("/#/home")
    }
  }
}}

Это перенаправит на www.reactApp.com/#/home, если маршрут /home в вашем маршрутизаторе приведет к новой странице.

...