Как удалить карточку после нажатия на кнопку в ней в пользовательском интерфейсе? - PullRequest
Новая
       36

Как удалить карточку после нажатия на кнопку в ней в пользовательском интерфейсе?

0 голосов
/ 25 августа 2018

Я разрабатываю расширение для Chrome и учусь использовать материал. Теперь на моем веб-сайте есть сетка карточек, пример карточки такой: enter image description here

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

function unfav(url) {
  console.log('unfavorite');
  chrome.identity.getProfileUserInfo(function(info) {
  var  email = info.email;
  console.log('email: ',email);
  var xhr = new XMLHttpRequest();
    xhr.open("POST", "http://34.204.12.200:5000/delete_page", true);
    xhr.onreadystatechange = function(e){
      if(xhr.readyState===4 && xhr.status===200){
        // this.forceUpdate();
      }
    }
    var params = {'email': email, 'url': url};
      xhr.send(JSON.stringify(params));
    });
}

Я знаю, что могу перезагрузить сайт в if(xhr.readyState===4 && xhr.status===200){, но это не элегантно, и я не хочу этого делать. Кроме того, это не типичный код реакции, у него нет extends component и render(), поэтому использование this.forceUpdate(); для повторного рендеринга также не работает. Моя карточная часть: 

<ButtonBase className={classes.cardButton} >  
<Tooltip title={concatenate(card.src)} classes={{ tooltip: classes.lightTooltip }} placement="top">
                      <div class="mycard">
                        <CardMedia>
                          <img src={card.img} 
                          style={{
                            width:150,
                            height:'auto',
                          }}/> 
                        </CardMedia>
                        <MuiThemeProvider theme={mytheme}>
                        <div style={{
                        }}>
                          <CardContent style={{
                            width:200,
                            height:'auto',
                            textAlign: 'left',
                            paddingBottom: 0,
                            paddingTop: 0
                          }}>
                            <Typography variant="subheading">
                              {card.brand}
                            </Typography>
                            <Typography variant="title">
                              {card.title}                              
                            </Typography>
                          <div style={{
                            display: 'flex',
                            justifyContent: 'space-between'
                          }}>
                            <Typography variant="body1">
                              ${card.price}
                            </Typography>
                            <Button  color="secondary" size="small" className={classes.button} onClick={()=>{unfav(card.url)}}>
                              Delete
                            </Button>
                           </div>
                          {/*</CardActions>*/}
                          </CardContent>
                          </div>
                          </MuiThemeProvider>
                          </div>
                          </Tooltip>
                  </ButtonBase>

извините за грязный отступ. Я заменяю тег <card> на <div class="mycard">.

...