Question

我正在使用反应路由器4和React Material UI，同时单击反应材料表行我可以通过使用onCellClick事件触发事件，但我需要在单击表行时导航另一个页面。

请您建议最好的方法吗？

<Table  onCellClick={()=> { alert("Table Row Clicked!! ")}} >

 <TableHeader displaySelectAll={false}
        adjustForCheckbox={false}>
        <TableRow>
          <TableHeaderColumn> First</TableHeaderColumn> 
          <TableHeaderColumn>Last</TableHeaderColumn>
        </TableRow>
 </TableHeader>
<TableBody displayRowCheckbox={false}>
        <TableRow>
          <TableRowColumn>Randal</TableRowColumn>
          <TableRowColumn>White</TableRowColumn>
        </TableRow>
 </TableBody>
</Table>

Answer 1

一种可能的解决方案是在react-router-dom中使用Link组件。您可以使用链接组件“扩展”表行组件。如：

 <TableRow component={Link} to="/pathGoesHere">
      <TableRowColumn>Randal</TableRowColumn>
      <TableRowColumn>White</TableRowColumn>
 </TableRow>

另一种可能的方法是在react-router-dom中用withRouter HoC包装您的组件。这使您可以作为道具访问历史对象。该方法将使您有更多的控制权和灵活性。

const TableView = ({ history }) => {
   return (
       <TableRow hover onClick={() => history.push("/pathGoesHere")}>
         <TableRowColumn>Randal</TableRowColumn>
         <TableRowColumn>White</TableRowColumn>
       </TableRow>
     )
}

export default withRouter(TableView)

在React Router 4中单击材料ui表行时需要导航链接

1 个答案: