Открытие уникального модального или поппер на основе нажатия кнопки - PullRequest
Новая
       6

Открытие уникального модального или поппер на основе нажатия кнопки

0 голосов
/ 08 февраля 2019

Я использую библиотеку material-ui, где у меня есть поппер внутри цикла, в каждом цикле есть один объект события, хранящийся в карточках.Я хочу открыть поппер на основе нажатия кнопки, который размещается на каждой карточке, но все попперы открываются, поскольку при нажатии кнопки я устанавливаю состояние «открыто» как истинное.Я хочу сделать это значение уникальным для каждого поппера, чтобы установить значение для этого поппера, которое нужно открыть.

Я пытался сделать открытие уникальным, но не знаю как. 

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

Я хочу открыть поппер только для одной карты, на которой я нажал кнопку, поскольку переменная состояния открытия одинакова для всех попперов, после чего все попперы открываются.Как сделать его уникальным

Ответы [ 2 ]

0 голосов
/ 16 июня 2019

Возможно, уже слишком поздно, но я надеюсь, что это кому-то поможет.

Вы можете использовать для этого манипуляции с dom.

В обработчике кнопок установите уникальный идентификатор: 

<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
  }
});
};
0 голосов
/ 08 февраля 2019

Вместо создания уникальных open значений для всех возможных карт.Было бы лучше и проще сделать реализацию карты в качестве отдельного компонента.Каждая карта будет иметь свое собственное состояние, и вам понадобится только одно значение open для обработки поппера, что разделит проблемы.

Так что переместите карту в отдельный компонент, спроектируйте некоторые реквизиты, которые обрабатывают данныевам нужно перейти от родительского компонента, примерно так: 

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