时间戳

首页 > 解决方案 > 在 React 中使表格单元格可点击

javascript - 在 React 中使表格单元格可点击

问题描述

当用户单击下面的 tableCell 文本时，他应该被导航到http://localhost:3000/crayons/${rows.id}<- 这存在于我的 react-router-dom

我不确定如何编辑以下代码来执行以下操作

<TableBody>

{props.rows.slice(page).map(row => (
     <TableCell align="center">{row.crayon_color}</TableCell>

</TableBody>

我试过的

<TableCell align="center" numeric component="a" href=`http://localhost:3000/crayons/${rows.id}`> {row.crayon_color}</TableCell>

标签： javascriptreactjs

解决方案

尝试对将路由推入的表格单元格使用回调history，这样您的代码将类似于以下内容：

import React from 'react';
import {withRouter} from 'react-router-dom';

const ExampleComponent = (props) => {

  // ...other component variables

  callback = () => {
    props.history.push(`crayons/${rows.id}`)
  }

  return (
    <TableCell align="center" onClick={callback}>{row.crayon_color}</TableCell>
  );
}

export default withRouter(ExampleComponent);

推荐阅读