Question

当我单击表格行时，我无法转到另一页。

当我单击特定的行时，我已经在使用getTdProps函数从表行中获取属性-它正在为此工作。问题是当我收到“ onClick”事件时，我不知道如何使用“反应路由器”转到另一个屏幕。我也不想使用“反应路由器”中的“链接”功能，因为该功能以蓝色突出显示表格中的文字。

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

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

Answer 1

您可以使用// Attack //------------------------------------------------------------------------------------------------------------- "AttackCapabilities" "DOTA_UNIT_CAP_RANGED_ATTACK" "BaseAttackSpeed" "100" "AttackDamageMin" "1" "AttackDamageMax" "1" "AttackDamageType" "DAMAGE_TYPE_ArmorPhysical" "AttackRate" "1.700000" "AttackAnimationPoint" "0.750000" "AttackAcquisitionRange" "800" "AttackRange" "600" "ProjectileModel" "particles/base_attacks/ranged_hero.vpcf" "ProjectileSpeed" "900"中的history.push

react-router

Answer 2

在您的getTdProps函数中，您可以使用此函数将其重定向到您应用的另一条路由：

window.location("YOUR_ROUTE");

示例：

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

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

如何从react-table单击Table Row到另一个页面？

2 个答案: