如何从 react-table 中点击 Table 行转到另一个页面？

Question

当我点击 table 行时，我无法转到另一个页面。

当我单击特定行时，我已经在使用 getTdProps 函数从 table 行获取属性 - 它正在为此工作。问题是当我收到 "onClick" 事件时，我不知道如何使用 'react-router' 转到另一个屏幕。我也不想使用 "react-router" 中的 "link" 函数，因为此函数以蓝色突出显示 table.

中的单词

```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>
        )        
    }
} ```

我想知道如何转到另一个屏幕，单击 table 中的整行？我应该调用另一个函数吗？我应该使用 react-router 的什么功能？

Answer 1

您可以使用 react-router

中的 history.push

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)

Answer 2

在你的 getTdProps 函数中，你可以使用它来重定向到你应用程序的另一个路由：

window.location("YOUR_ROUTE");

示例：

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

如果您的路由器中的路由 /home 指向一个新页面，这将重定向到 www.reactApp.com/#/home。

如何从 react-table 中点击 Table 行转到另一个页面？

How to go to another page clicking on Table Row from react-table?

javascript

reactjs

react-router

react-table