#javascript #reactjs #material-ui
Вопрос:
Я пытаюсь сделать складной стол с помощью MateialUI В настоящее время у всех моих слайдов есть коллапсы, но они связаны с одним состоянием «открыть», поэтому, если я открою один слайд, все остальные откроются.
здесь а sansbox:https://codesandbox.io/s/withered-bash-e1mzu?file=/src/components/BrandTable.js
Массив объектов реквизита нуждается в складной таблице для каждого слайда, который у меня есть.
const props = [
{slide: "Protein", charts: ["Keto"]},
{slide: "Bars with benefits - beyond the nutritional profile", charts: ["Innovative approaches"]},
{slide: "Vegan", charts: []}
]
return (
<div>
{
props.map((blog) =>
<React.Fragment>
<TableRow key={props} >
<TableCell component="th" scope="row">
{blog.slide}
</TableCell>
<TableCell size="small">
<IconButton aria-label="expand row" size="small" onClick={() => setOpen(!open)}>
{open ? <KeyboardArrowUpIcon /> : <KeyboardArrowDownIcon/>}
</IconButton>
</TableCell>
</TableRow>
<TableRow>
<TableCell style={{ paddingBottom: 0, paddingTop: 0 }} colSpan={6}>
<Collapse in={open} timeout="auto" unmountOnExit>
{
open amp;amp; <Box margin={1}>
<Table size="small" aria-label="purchases">
<TableBody>
{blog.charts}
</TableBody>
</Table>
</Box>
}
</Collapse>
</TableCell>
</TableRow>
}
</React.Fragment>
)
}
</div>
)
} Комментарии:
1. Переместите итерацию из
Rowкомпонента [или] используйте идентификатор строки для отслеживания статуса открытия/закрытия.
Ответ №1:
const [open, setOpen] = React.useState({});
И обновите на основе щелчка элемента с идентификатором,
<IconButton
aria-label="expand row"
size="small"
onClick={() =>
setOpen((prev) => ({ ...prev, [blog.id]: !prev[blog.id] }))
}
>
Компонент строки:-
const Row = () => {
return (
<div>
{props.map((blog) => (
<React.Fragment>
<TableRow key={props}>
<TableCell component="th" scope="row">
{blog.slide}
</TableCell>
<TableCell size="small">
<IconButton
aria-label="expand row"
size="small"
onClick={() =>
setOpen((prev) => ({ ...prev, [blog.id]: !prev[blog.id] }))
}
>
{open[blog.id] ? (
<KeyboardArrowUpIcon />
) : (
<KeyboardArrowDownIcon />
)}
</IconButton>
</TableCell>
</TableRow>
<TableRow>
<TableCell
style={{ paddingBottom: 0, paddingTop: 0 }}
colSpan={6}
>
<Collapse in={open[blog.id]} timeout="auto" unmountOnExit>
{open[blog.id] amp;amp; (
<Box margin={1}>
<Table size="small" aria-label="purchases">
<TableBody>{blog.charts}</TableBody>
</Table>
</Box>
)}
</Collapse>
</TableCell>
</TableRow>
</React.Fragment>
))}
</div>
);
};
Ответ №2:
Пожалуйста, попробуйте посмотреть этот пример здесь: https://codesandbox.io/s/kbcee
Я думаю, что вы можете хранить активный идентификатор развернутой строки вместо только состояния «открыть/закрыть». Или вы можете создать Row компонент, в котором открытое состояние будет каждый раз использоваться только внутри компонента .