Функция handleExpand меняет несколько карт материалов UI в сетке - PullRequest
0 голосов
/ 14 апреля 2020

Мой коллега создал сетку с использованием Material UI; каждая строка в сетке имеет 3-5 карт пользовательского интерфейса материала, и каждая карта должна иметь опцию «развернуть», чтобы показать больше деталей. Для каждой строки в сетке мы используем redux / hooks для извлечения данных; каждая запись имеет одинаковые поля (например, каждая запись может иметь поле «имя», «год» и т. д. c.). Проблема, с которой мы сталкиваемся, заключается в том, что когда мы расширяем карточку «имя» в одном ряду сетки, она расширяет все карточки «имя» в сетке. Я пытался найти решение, но ничего не нашел. Вот ссылка на коды и коробку с примерами данных:

https://codesandbox.io/s/inspiring-stallman-jtjss?file= / src / App. js

1 Ответ

1 голос
/ 14 апреля 2020

У каждого имеющегося у вас контейнера-карты должна быть своя собственная функция разворачивания / свертывания.

Вы можете создать новый компонент, который оборачивает конкретную c карту (например, <CardWrapper />), и этот компонент будет иметь свой собственное состояние (extendedName, setExpandedName) и т. д.

Быстрое и грязное решение может выглядеть следующим образом:

const CardWrapper = (dataExample) => {
  const dispatch = useDispatch();
  [expandedName, setExpandedName] = useState(false);
  const handleExpandClickName = () => {
    setExpandedName(!expandedName)
  };

  return (
    <div className={classes.root}>
      <Grid>
        <Card>
           <CardActions disableSpacing>
             <IconButton
               key={dataExample.key}
               className={clsx(classes.expand, {
                 [classes.expandOpen]: expandedName,
               })}
               onClick={() => dispatch(handleExpandClickName)}
               aria-expanded={expandedName}
               aria-label="show more"
             >
               <ExpandMoreIcon />
             </IconButton>
           </CardActions>
           <Collapse in={expandedName} timeout="auto" unmountOnExit>
             <CardContent>
               <Typography paragraph>Test</Typography>
             </CardContent>
           </Collapse>
         </Card>
       </Grid>
    </div>);
}

А внутри вашего кода вы должны использовать что-то вроде этого:

const ServiceAreaTile = () => {
  const psOverviewSA = useSelector((state) => state.psOverviewSA);

  return psOverviewSA.map((dataExample) => {
    return (<CardWrapper dataExample={dataExample} />);
  }
}

Таким образом, состояние раскрытия сохраняется внутри каждого CardWrapper, и между ними нет коллизий.

...