在 React 中使表格单元格可点击答案

【问题标题】：Make table cell clickable in React在 React 中使表格单元格可点击
【发布时间】：2019-08-31 17:36:19
【问题描述】：

当用户点击下面的tableCell文本时，他应该导航到http://localhost:3000/crayons/${rows.id}

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

<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>

【问题讨论】：

您是否使用任何类型的路由器？ /crayons 是您应用程序的一部分吗？查看react-router-dom你可以找到GitHub repo here
@MattOestreich 是的，它是我的 react-router-dom 的一部分

标签： javascript reactjs

【解决方案1】：

尝试对将路由推送到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);

【讨论】：

很抱歉这不起作用，因为行不存在，它是行，并且是为每个表格单元格生成的。我更新了我的问题，也许这有点清楚了
在这种情况下，Sangam Rajpara 的答案会更好地满足您的需求，因为它会在反应组件中编写回调
这不起作用，因为它在单元格之间显示为文本

【解决方案2】：

EDIT更新了现场演示，展示了如何处理数组中的动态对象。

EDIT 2更新了现场演示和下面的代码，以反映如何将 URL 参数与动态对象一起使用..

我相信最简单的方法是使用来自react-router-dom 的<Link/> 组件。

Live Demo Found Here

这就是BrowserRouter 需要的样子：

    <Switch>
      <Route exact path="/" component={Home} />
      <Route exact path="/crayons" component={Crayons} />
      <Route path="/crayons/:id" component={Crayons} />

      {/* MUST BE THE LAST ROUTE IN THIS LIST!!!! */}
      <Route component={FourZeroFour} />
    </Switch>

然后在您的 Crayons.js 页面内，您可以访问 URL 参数，在本例中为 id，例如：props.match.params.id..

演示Table代码：

// Build 'fake data' for table
const rows = Array.from(Array(10).keys()).map(item => {
  return {
    data: "Crayon",
    count: Math.floor(Math.random() * 100),
    id: item + 1
  }
})

export default function Home() {
  const classes = useStyles();

  return (
    <>
      <h1>Welcome to my app</h1>
      <Paper className={classes.root}>
        <Table className={classes.table}>
          <TableHead>
            <TableRow>
              <TableCell>Data</TableCell>
              <TableCell>ID</TableCell>
              <TableCell>Count</TableCell>
            </TableRow>
          </TableHead>
          <TableBody>
            {rows.map(row => {
              return (
                <TableRow key={row.id}>
                  <TableCell component="th" scope="row">
                    {row.id
                      ? <Link to={`/crayons/${row.id}`}>{row.data}</Link>
                      : row.data}
                  </TableCell>
                  <TableCell>
                    {row.id}
                  </TableCell>
                  <TableCell>
                    {row.count}
                  </TableCell>
                </TableRow>
              )
            })}
          </TableBody>
        </Table>
      </Paper>
    </>
  )
}

【讨论】：

您能否更新<Link to="/crayons" 以便它可以采用动态ID？例如${row.calories}
@JosephAdam 让我知道这是否有助于解决问题 - 我已经更新了我的答案以及现场演示。
我试图强迫它这样做<Link to={`http://localhost:3000/crayon/${row.id}`}
成功了！我只需要使用crayon/${row.id} 而不是http://localhost:3000/crayon/${row.id}
很高兴你能成功！我还用相关代码以及现场演示更新了我的答案。干杯！

【解决方案3】：

您可以使用库React Router Dom。

解决方案很简单，将 withRouter HOC 添加到您的组件中。

import { withRouter } from 'react-router-don'


const Component = () => (
    <TableCell align="centre" onClick={()=>props.history.push(`${rows.id}`)}>{row.crayon_color}</TableCell>
)

export default withRouter(Component);

【讨论】：

您不能在其他<TableCell ... 之间使用const Component = () => (，这实际上最终会在浏览器的表格中显示为文本
我正在演示如何将 HOC withRouter 添加到组件中。