javascript - Material-UI SimpleTable 事件处理

Question

我希望从在 material-UI 表组件上触发的事件中获取 rowData。我正在构建的应用程序非常基础，因此只需要一个基本表。

我曾尝试将事件处理程序传递给许多组件(Table、TableCell 和 TableRow)，但没有成功。以前，表格组件似乎有一个 onRowSelection 的 prop，但现在似乎没有了。

我确信有一种非常简单的方法可以做到这一点，我必须遗漏一些非常微不足道的东西，但是，我到处搜索，找不到实现这一目标的基本解决方案和/或方法。

let id = 0;
function createData(instrument, price, volume, rsi) {
  id += 1;
  return { id, instrument, price, volume, rsi };
}

const rows = [
  createData('TSLA', 283.65, 8.6, 13.2, 22),
  createData('AMZN', 1638.78, 9.0, 23, 46),
  createData('APPL', 172.91, 16.0, 24, 37),
  createData('AMRN', 21.36, 3.7, 67, 73),
  createData('PLUG', 1.71, 16.0, 49, 32),
];

class BasicTable extends React.Component {

render() {
  const { classes } = this.props;

  return (
    <Paper className={classes.root}>
      <Table onRowSelection = {(event) => {console.log(event)}} className={classes.table}>
        <TableHead>
          <TableRow>
            <TableCell className={classes.tableHeaderCell}>Instrument</TableCell>
            <TableCell className={classes.tableHeaderCell} align="right">Price</TableCell>
            <TableCell className={classes.tableHeaderCell} align="right">Volume</TableCell>
            <TableCell className={classes.tableHeaderCell} align="right">RSI</TableCell>
          </TableRow>
        </TableHead>
        <TableBody>
          {rows.map(row => (
            <TableRow selected={true} hover className={classes.tableRow}
                      key={row.id}>
              <TableCell className={classes.tableCell} component="th" scope="row">
                {row.instrument}
              </TableCell>
              <TableCell align="right">{row.price}</TableCell>
              <TableCell align="right">{row.volume}</TableCell>
              <TableCell align="right">{row.rsi}</TableCell>
            </TableRow>
          ))}
        </TableBody>
      </Table>
    </Paper>
  );
}
}

BasicTable.propTypes = {
  classes: PropTypes.object.isRequired,
};

export default withStyles(styles)(BasicTable);

Answer 1

你可以写一个onClick事件然后像下面这样调用函数

https://codesandbox.io/s/wwq0r9nn8?fontsize=14