Question

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

我尝试将事件处理程序传递给众多组件（Table，TableCell和TableRow），但是没有运气。过去，表组件似乎具有onRowSelection属性，但是似乎不再可用。

我敢肯定有一个非常简单的方法可以做到这一点，并且我必须缺少一些极其琐碎的东西，但是，我到处搜索了，找不到找到实现此目标的基本解决方案或方法。

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

Material-UI SimpleTable事件处理

1 个答案: