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

发布时间：2020-12-15 20:32:23 所属栏目：百科来源：网络整理

导读：我正在使用反应路由器4和 React Material UI,同时单击反应材料表行我可以通过使用onCellClick事件触发事件但我需要在单击表行时导航另一个页面. 你能建议最好的办法吗？ Table onCellClick={()= { alert("Table Row Clicked!! ")}} TableHeader displaySelec

我正在使用反应路由器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>

解决方法

一种可能的解决方案是在react-router-dom中使用 Link组件.您可以使用Link组件“扩展”Table Row组件.如：

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

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

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

export default withRouter(TableView)

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!