Material UI React Table onCellClick答案

【问题标题】：Material UI React Table onCellClickMaterial UI React Table onCellClick
【发布时间】：2018-08-15 12:12:43
【问题描述】：

我正在尝试在 Material UI 表上实现一个简单的 onCellClick 侦听器。

在它的早期版本中，表范围onCellClick 中的一个函数用于给出点击所在的行号和列号，如图所示here

当前放置这个函数的时候-

import React from 'react';
import PropTypes from 'prop-types';
import { withStyles } from '@material-ui/core/styles';
import Table from '@material-ui/core/Table';
import TableBody from '@material-ui/core/TableBody';
import TableCell from '@material-ui/core/TableCell';
import TableHead from '@material-ui/core/TableHead';
import TableRow from '@material-ui/core/TableRow';
import Paper from '@material-ui/core/Paper';

const styles = {
  }
let id = 0;
function createData(name, calories, fat, carbs, protein) {
  id += 1;
  return { id, name, calories, fat, carbs, protein };
}

const rows = [
  createData('Frozen yoghurt', 159, 6.0, 24, 4.0),
  createData('Ice cream sandwich', 237, 9.0, 37, 4.3),
  createData('Eclair', 262, 16.0, 24, 6.0),
  createData('Cupcake', 305, 3.7, 67, 4.3),
  createData('Gingerbread', 356, 16.0, 49, 3.9),
];

function SimpleTable(props) {
  const { classes } = props;

  return (
    <Paper className={classes.root}>
      <Table className={classes.table} 
      onCellClick={(rowNumber, 
      columnId) =>
       console.log(rowNumber,columnId)}>
        <TableHead>
          <TableRow>
            <TableCell>Dessert (100g serving)</TableCell>
            <TableCell numeric>Calories</TableCell>
            <TableCell numeric>Fat (g)</TableCell>
            <TableCell numeric>Carbs (g)</TableCell>
            <TableCell numeric>Protein (g)</TableCell>
          </TableRow>
        </TableHead>
        <TableBody>
          {rows.map(row => {
            return (
              <TableRow key={row.id}>
                <TableCell component="th" scope="row">
                  {row.name}
                </TableCell>
                <TableCell numeric>{row.calories}</TableCell>
                <TableCell numeric>{row.fat}</TableCell>
                <TableCell numeric>{row.carbs}</TableCell>
                <TableCell numeric>{row.protein}</TableCell>
              </TableRow>
            );
          })}
        </TableBody>
      </Table>
    </Paper>
  );
}


export default withStyles(styles)(SimpleTable);

它抛出错误未知事件处理程序属性onCellClick。它将被忽略。这是预期的，因为与以前的版本不同，表 source code 中没有传递 onCellClick 函数。

现在如何在 Material-UI 中实现 onCellClick 功能？

我们将不胜感激。

【问题讨论】：

标签： reactjs material-ui

【解决方案1】：

单元格可以是 th 或 td 元素 (see the source code) 或您通过 component 属性传递的自定义元素。

每一个都将支持onClick property。

所以你需要这样的东西：

handleClick = (id, column) => {
  return (event) => {
    console.log(`You clicked on row with id ${id}, in column ${column}.`);
  }
}

render() {
  return (
    // ...
    {this.state.rows.map((row) => (
      <TableRow key={row.id}>
        <TableCell onClick={this.handleClick(row.id, "calories")}>
          {row.calories}
        </TableCell>
        // ...
        <TableCell onClick={this.handleClick(row.id, "protein")}>
          {row.protein}
        </TableCell>
      </TableRow>
    )}
    // ...
  );
}

【讨论】：