反应将onclick数据传递给其他元素

时间:2019-02-07 20:55:08

标签: javascript reactjs

我需要帮助。。 以下是我附上的代码。

我希望输出是当按钮单击onClick时,数据将传递到其他显示falseData的元素,该数据是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);

1 个答案:

答案 0 :(得分:0)

使用匿名功能(如

)向按钮添加onClick侦听器
    def __init__(self, master):

        ##Title of the window
        self.master = master
        master.title("N-Back")

        ##It measures the screen size (width x height + x + y)
        ##The opened window will be based on the screen size
        master.geometry("{0}x{1}-0+0".format(master.winfo_screenwidth(), master.winfo_screenheight()))
        self.canvas = tk.Canvas(master, width=master.winfo_screenwidth(), height=master.winfo_screenheight(), \
                            borderwidth=0, highlightthickness=0, bg="grey")


        self.canvasWidth = master.winfo_screenwidth()
        self.canvasHeight =  master.winfo_screenheight()

        self.createLines()
        self.createText()

        self.canvas.grid()

        # Notice we define self.sequence before calling self.targetTask
        self.sequence = generateZBackSequence(20, 5)


        ## Positions of the circles ("stims")

        ##          -   -                      
        ##        0 - 1 - 2                     
        ##      ------------                   
        ##       3  - 4 - 5                      
        ##      ------------                   
        ##       6  - 7 - 8                      
        ##          -   -                        

        self.positions = np.array([[(self.canvasWidth/2)-130, (self.canvasHeight/2)-130],\
                               [(self.canvasWidth/2), (self.canvasHeight/2)-130],\
                               [(self.canvasWidth/2)+130, (self.canvasHeight/2)-130],\
                              [(self.canvasWidth/2)-130, (self.canvasHeight/2)],\
                               [(self.canvasWidth/2), (self.canvasHeight/2)],\
                               [(self.canvasWidth/2)+130, (self.canvasHeight/2)],\
                              [(self.canvasWidth/2)-130, (self.canvasHeight/2)+130], \
                               [(self.canvasWidth/2), (self.canvasHeight/2)+130], \
                               [(self.canvasWidth/2)+130, (self.canvasHeight/2)+130]])


        self.t = Thread(target=self.targetTask,)
        self.t.daemon = True
        self.t.start()

在渲染方法中,要输出日期添加的地方

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