打开基于按钮单击的唯一模式或波普尔

Question

我正在使用material-ui库，其中我在循环中有一个波普尔，每个循环都有一个存储在卡片中的事件对象。我想根据放置在每张卡片上的按钮单击打开波普尔，但所有波普尔都被打开，因为在单击按钮时我将"打开"状态设置为 true。我想使这个值对于每个波普尔是唯一的，以便我为需要打开的波普尔设置值。

我试图让开放成为独一无二的，但不知道如何。

 this.state = {
      open: false,
    }
  handleClickButton = event => {
  console.log(event.target)
  this.setState(state => ({
      open: !state.open,
    }));
  };

下面是呈现方法代码：

   {this.props.events.map((event) =>
           (
           <Card>
                <CardContent>
                    <Typography variant="h5" component="h2">
                     {event.completionIntent.toUpperCase()}
                    </Typography>
                    <Typography color="textSecondary" gutterBottom>
                    <span><FontAwesomeIcon icon="clock"/></span>
                    </Typography>
                    <Typography component="p">
                    {event.eventTime}
                    <br />
                    </Typography>
                </CardContent>
                <CardActions>
                <Link href={event.audio?"":null} style={{color:event.audio?'#3f51b5':'#bdbdbd', fontSize:'12px',}}
                underline="none"
                >
                    Download Audio
                </Link>
                <Button
                id={event.completionIntent+'Button'}
                buttonRef={node => {
                  this.anchorEl = node;
                }}
                variant="contained"
                onClick={this.handleClickButton}
                aria-describedby={event.completionIntent}
                title="Send"
                style={{backgroundColor:!event.audio && '#3f51b5',color:'#eeeeee',padding:'2px 0px', marginLeft:'14px', }}
                disabled={event.audio}
                >
                Send
               <Send  className={classes.rightIcon}/>
                </Button>
            <Popper
              id={event.completionIntent}
              open={open}
              anchorEl={this.anchorEl}
              placement='bottom'
              disablePortal={false}
              className={classes.popper}
              modifiers={{
                preventOverflow: {
                  enabled: false,
                  boundariesElement:'scrollParent' 
                },
              }}
            >
              <Paper className={classes.paper}>
                <DialogTitle>{"Manual Task Updation"}</DialogTitle>
                <DialogContent>
                  <DialogContentText>
                    Are you sure you want to update {event.completionIntent.toUpperCase()}?
                  </DialogContentText>
                </DialogContent>
                <DialogActions>
                  <Button onClick={this.handleClickButton} color="primary">
                    Disagree
                  </Button>
                  <Button onClick={this.handleClickButton}  color="primary">
                    Agree
                  </Button>
                </DialogActions>
              </Paper>
            </Popper>                    
                </CardActions>
            </Card>
            </div>
            ))}

我

只想为一张我单击按钮的卡片打开波普尔，因为所有波普尔的开放状态变量都相同，然后所有波普尔都被打开。如何让它独一无二

Answer 1

也许为时已晚，但我希望它能帮助那里的人。

您可以使用 dom 操作来执行此操作。

在按钮处理程序中，设置唯一 id：

<Button
   ...
   onClick={() => this.handleClickButton(some-unique-id)}
   ...
>
...
</Button>

然后在您的波普尔状态下：

<Popper
  ...
  open={open[some-unique-id]}
  ...
>
...
</Popper>    

最后更改您的处理程序：

handleClickButton = (event,some-unique-id) => {
...
this.setState({
  open: {
      [some-unique-id]: true
  }
});
};

Answer 2

而不是为所有可能的卡片制作唯一的open值。将卡实现作为一个单独的组件将是一个更好、更简单的解决方案。然后，每张卡都有自己的状态，您只需要一个open值来处理波普尔，从而分离关注点。

所以把卡移到一个单独的组件中，设计一些处理你需要从父组件传下来的数据的道具，像这样：

{
  this.props.events.map((event) =>
           (<MyCustomCardImplementation key={someUniqueProperty {...myCustomCardProps} />) 
}