Разверните только одну карту из группы карт

#reactjs #material-ui

Вопрос:

Я использую карту пользовательского интерфейса material для отображения группы карт, это мое состояние:

 state = {
    items: [],
    anchortEl: null,
    expand: false
}

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

 render() {
    return (
        <div className="outerDiv-favorites" >
            {
                this.state.items.length !== 0 ?
                    this.state.items.map((item, i) => (
                        <Grid>
                            <Card className="root" key={i}>
                                <CardMedia className='media' key="media">
                                    <img style={{ width: "100%", height: "150px" }}
                                        alt="SERVICE"
                                    />
                                </CardMedia>

                                <div
                                    className="card-header"
                                    key={item.name}
                                >{item.name}</div>

                                <CardActions key="action"
                                    style={{ padding: '0' }}
                                    className="card-actions"
                                >
                                    <IconButton aria-label="add to favorites">
                                        <FavoriteIcon />
                                    </IconButton>
                                    <IconButton
                                        onClick={() => {
                                            this.setState({
                                                ...this.state,
                                                expand: !this.state.expand
                                            })
                                        }}>
                                        <ExpandMoreIcon />
                                    </IconButton>
                                </CardActions>

                                <Collapse in={this.state.expand} timeout="auto"
                                    unmountOnExit key="collapse">
                                    <CardContent key="content">
                                        <div>{item.description}</div>
                                    </CardContent>
                                </Collapse>
                            </Card>
                        </Grid>
                    ))
                    :
                    <div className="no-approval-data"><p>WAITING!</p></div>
            }
        </div>
    )
}

Вот изображение того, как они выглядят:

Проблема в том, что когда я нажимаю, чтобы развернуть одну карту, все карты разворачиваются! Как развернуть только ту карту, на которую я нажал?

1. Похоже, что все карты используют одно и то же состояние, чтобы определить, развернуты они или свернуты. Если вы хотите, чтобы они расширялись независимо, то каждому из них потребуется свое собственное уникальное расширенное состояние.

2. Я не знаю количество карт, потому что данные загружаются из базы данных. Поэтому я не могу определить, сколько состояний мне нужно!

3. Почему вы можете просто поместить состояние расширения в массив объектов items рядом с именем и описанием?

4. Мне это и в голову не приходило! СПАСИБО, что это сработало 🙂

Ответ №1:

У вас есть только 1 состояние расширения, которое используется всеми картами. Это означает, что если пользователь откроет 1 карту, состояние изменится, и все остальные карты также будут расширяться одновременно.

Чтобы исправить это, каждой карте необходимо свое собственное уникальное состояние расширения, например:

 state = {
    items: [
      {name: 'Foo', description: 'Foo is foo', expand: false},
      {name: 'Bar', description: 'Bar is bar', expand: true},
      {name: 'Tree', description: 'Tree is tree', expand: false},
    ],
    anchortEl: null,
}

Ответ №2:

Установите высоту карты на минимальное содержание.если высота одной карты увеличивается, высота строки сетки увеличивается, и по умолчанию стиль карты настраивается на высоту row.So, установив его в значение min-content, вы убедитесь, что он не подстраивается под высоту строки сетки.