Как закрыть карточку, когда она реагирует на нажатие кнопки? - PullRequest
Новая
       17

Как закрыть карточку, когда она реагирует на нажатие кнопки?

0 голосов
/ 10 января 2019

У меня есть карточка материала, в которой она содержит изображение, поле ввода, флажок и кнопку отправки. В какой карте отображается onclick на какой-то другой вариант, который не упомянут в коде ниже. Я хочу закрыть карту, когда нажимаю на кнопку отправить. Как мне этого добиться? 

     <Card
          className="details-card"
          style={{ paddingTop: "0px" }}
          color="primary"
        >
          <CardHeader
            style={{
              paddingBottom: 0,
              paddingTop: 0
            }}
            title="Image"
          />
          <img src="https://unsplash.it/200/?random" />
          <CardContent className="details-card-body">
            <TextField label="Name" fullWidth />
            <Grid container>
              <Grid item xs={4}>
                <Typography>
                  New User
                  <Checkbox
                    checked={this.state.addNew}
                    name="addNew"
                    onChange={this.handleCheckBox("addNew")}
                    value="new user"
                    inputProps={{ "aria-label": "Checkbox B" }}
                  />
                </Typography>
              </Grid>
            </Grid>
            <Button variant="contained" color="primary">
              Click to Tag
            </Button>
          </CardContent>
        </Card>

Здесь ниже мой код на CodeSandbox https://codesandbox.io/embed/lppzx48r0m

1 Ответ

0 голосов
/ 10 января 2019

Есть несколько способов достичь того, что вы хотите сделать вам понадобится флаг, чтобы условно спрятать или показать карту. Например, давайте возьмем flag переменную в состоянии и изменим переменную состояния flag на основе кнопки отправки и на основе this.state.flag, которую вы можете сделать 

{this.state.flag ?
    (<Card
        className="details-card"
        style={{ paddingTop: "0px" }}
        color="primary"
    >
        //Card content
    </Card>)
    :
    null
}

Вы также можете предоставить условное CSS на основе this.state.flag

<Card
    className="details-card"
    style={{ paddingTop: "0px", display: this.state.flag ? block : 'none'}}
    color="primary"
>
    //Card content
</Card>

P.S .: Второй подход не рекомендуется, потому что мы визуализируем элемент, даже если он не нужен.

...