>source

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

  • 이전 python - Flask의 로그인 양식에서 비밀번호를 안전하게 전송
  • 다음 Feature Flags - 기능 플래그 - 클라이언트 응용 프로그램에 노출되어야합니까?