Question

我正在使用material-ui库，其中在循环内有一个弹出器，每个循环在卡中存储一个事件对象。我想基于放置在每张卡上的按钮单击来打开popper，但是由于单击按钮时我将“ open”状态设置为true，所以所有popper都被打开了。我想使每个Popper的值唯一，以便为需要打开的Popper设置值。

我试图将其设置为独一无二，但是不知道如何。

 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：

<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@android:color/white"
android:fitsSystemWindows="false">

<FrameLayout
    android:id="@+id/player_holder"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@android:color/black"
    app:layout_constrainedHeight="true"
    app:layout_constraintBottom_toTopOf="@+id/info_panels"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent">

    <com.google.android.exoplayer2.ui.PlayerView
        android:id="@+id/player_src"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:adjustViewBounds="true"
        android:maxHeight="350dp"
        android:minHeight="200dp"
        app:resize_mode="fixed_width" />

    <androidx.appcompat.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?android:attr/actionBarSize"
        android:fitsSystemWindows="true"
        android:theme="@style/AppTheme.ToolbarOverlay" />

</FrameLayout>

<FrameLayout
    android:id="@+id/info"
    android:layout_width="match_parent"
    android:layout_height="0dp"
    android:background="?android:attr/windowBackground"
    android:clickable="true"
    android:focusable="true"
    app:layout_constraintBottom_toTopOf="@+id/navigation"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/player_holder" />

<com.google.android.material.bottomnavigation.BottomNavigationView
    android:id="@+id/navigation"
    android:layout_width="match_parent"
    android:layout_height="?android:attr/actionBarSize"
    android:background="?android:attr/windowBackground"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/info_panels"
    app:menu="@menu/navigation_full" />

</androidx.constraintlayout.widget.ConstraintLayout>

然后处于弹出状态：

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

最后更改您的处理程序：

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

Answer 2

不是为所有可能的卡制作唯一的open值。将卡实现作为单独的组件将是一个更好，更简单的解决方案。这样，每张卡都会有其自己的状态，您只需要一个open值即可处理popper，从而将关注点分开。

因此，将卡移动到一个单独的组件中，设计一些道具来处理需要从父组件传递来的数据，如下所示：

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

根据按钮单击打开唯一模式或弹出窗口

2 个答案: