REACT传递的onclick数据到其它元件

Question

我需要帮助..我只是在这个新节目，这反应..下面是我的代码被附加..

我湾输出是当按钮点击的onClick，数据将传递给显示fakeData是MOP，代码，日期，状态其它元件。

谁能告诉我，我应该为下一步做的，给我我的问题的正确答案..

THX的帮助..

const fakeData = [
  {
    MOP: '(MOP 1196.00)',
    code: '#18102100-001',
    date: '10-08-2018',
    status: 'Pending Order',
  },
  {
    MOP: '(MOP 349.00)',
    code: '#18101900-001',
    date: '11-09-2018',
    status: 'Paid',
  },
];

export class TransactionPage extends React.PureComponent {
  constructor(props) {
    super(props);
    this.state = {};
  }

  render() {
    const { classes, intl } = this.props;
    const formatted = fakeData.map(item => (
      <React.Fragment key={item.code}>
        <ListItem
          button
          className={classes.displayBlock}
          name="transaction"
        >
          <ListItemText className={classes.disablePadding} primary={item.MOP} />
          <ListItemText
            className={classes.disablePadding}
            secondary={item.code}
          />
          <ListItemText
            className={classes.disablePadding}
            secondary={item.date}
          />
          <ListItemText
            className={classes.disablePadding}
            secondary={item.status}
          />
          <ListItemSecondaryAction>
            <ArrowIcon />
          </ListItemSecondaryAction>
        </ListItem>
      </React.Fragment>
    ));
    return (
      <Page>
        <Helmet>
          <title>{intl.formatMessage({ ...messages.header })}</title>
          <meta
            name="description"
            content={<FormattedMessage {...messages.meta} />}
          />
        </Helmet>
        <PageContent>
          <Paper>
            <Grid container>
              <Grid item xs={12} sm={5} md={4} lg={3}>
                <List className={classes.list} disablePadding>
                  {formatted}
                </List>
              </Grid>

              <Hidden xsDown>
                <Grid item sm={7} md={8} lg={9}>
                  <Grid
                    container
                    direction="column"
                    spacing={16}
                    className={classes.details}
                  >
                    <Grid item xs={12} className={classes.center} />
                    <Grid item xs={12}>
                      <Typography variant="h6">
                        CREDIT DEBIT
                      </Typography>
    //--------- I WANT THE DATE SHOW HERE WHEN BUTTON IS CLICK -------
                    </Grid>
                    <Grid item xs={12}>
                      <Divider />
                    </Grid>
                    <Grid item xs={12} />
                  </Grid>
                </Grid>
              </Hidden>
            </Grid>
          </Paper>
        </PageContent>
      </Page>
    );
  }
}

TransactionPage.propTypes = {
  intl: PropTypes.object.isRequired,
  dispatch: PropTypes.func.isRequired,
};

export default compose(
  withStyles(styles))(TransactionPage);

Answer 1

一个onClick监听添加到您的按钮，一个匿名函数像

<button onClick={() => this.setState({ buttonClickedDate: new Date() }) ..></button>

而在你的渲染方法，要输出添加日期

{this.state.buttonClickedDate}