[英]I don't understand why my accordion isn't collapsing or expanding
I have a page with a few accordion items.我有一个包含一些手风琴项目的页面。 Its info is based on a json file.
它的信息基于一个 json 文件。 During initial load of the page, everything works perfectly, but upon using the filter, the items are filtered correctly except it no longer collapses nor expands.
在页面的初始加载期间,一切正常,但在使用过滤器时,项目被正确过滤,除了它不再折叠或展开。
let ifFilter = false;
var dataReturn = [], itemlist;`
export default function EventPastData(data) {`
data = Object.values(data.data.past);
const [currentPage, setCurrentPage] = useState(1);
const [itemsPerPage] = useState(5); //change this number to change how many items in each page
const [expanded, setExpanded] = useState(false);
const [year, setYear] = useState('');
const handleOpen = (panel) => (e, isExpanded) => {
setExpanded(isExpanded ? panel : false);
};
console.log(data);
console.log(dataReturn)
function populate(d) {
itemlist = d.map((x, index) => {
//console.log(index);
return (
<Accordion
key={index}
className={`${new Date(x.date).getFullYear()}`}
expanded={expanded === `panel${index}`}
onChange={handleOpen(`panel${index}`)}
>
<AccordionSummary expandIcon={<ExpandMoreIcon />}>
<Avatar variant="rounded">
<img src={require(`../../img/${x.img}`)} alt={x.img} />
</Avatar>
<Paragraph text={x.title} size='1.3rem' />
<Paragraph text={x.date} size='1.1rem' />
</AccordionSummary>
<AccordionDetails>
<Paragraph text={x.description} size='1.1rem' />
<br />
<Paragraph text={'Venue: ' + x.venue} size='1.1rem' />
<Paragraph text={'Time: ' + x.time} size='1.1rem' />
</AccordionDetails>
</Accordion>
)
});
};
const handleFilter = (event) => {
setYear(event.target.value);
dataReturn = [];
for (let i = 0; i < data.length; i++) {
if (new Date(data[i].date).getFullYear() === event.target.value) {
dataReturn.push(data[i]);
};
};
if (event.target.value !== '') {
ifFilter = true;
populate(dataReturn);
} else {
populate(data);
};
};
if (ifFilter !== true) {
populate(data);
};
The page contents are then displayed using the following HTMl:然后使用以下 HTML 显示页面内容:
return (
<div className='test'>
<Container sx={{mx: 'auto'}}>
<div id='listAccordion'>
{currentItems}
</div>
<Grid container direction="row" justifyContent="center" alignItems="center" spacing={2}>
<Grid item sm={1}>
<FormControl sx={{ m: 1, minWidth: 80 }} color='secondary'>
<InputLabel id="demo-simple-select-autowidth-label">Year</InputLabel>
<Select
labelId="demo-simple-select-autowidth-label"
id="demo-simple-select-autowidth"
value={year}
onChange={handleFilter}
autoWidth
label="Year"
>
<MenuItem value="">
<em>None</em>
</MenuItem>
<MenuItem value={2019}>2019</MenuItem>
<MenuItem value={2020}>2020</MenuItem>
<MenuItem value={2021}>2021</MenuItem>
<MenuItem value={2022}>2022</MenuItem>
</Select>
</FormControl>
</Grid>
<Grid item sm={11}>
<Pages itemsPerPage={itemsPerPage} totalItems={itemlist.length} paginate={paginate}></Pages>
</Grid>
</Grid>
<p>You're on page: <strong>{currentPage}</strong></p>
</Container>
</div>
)
This is what the page looks like when the filter isn't used, accordion working这是不使用过滤器时页面的样子,手风琴工作
This is what the page looks like after filter is used, accordion no longer working这是使用过滤器后页面的样子,手风琴不再工作
I have no idea what the filter may be doing which is causing the accordion item to not work.我不知道过滤器可能在做什么导致手风琴项目不起作用。 If anyone has any ideas you could point me to, it would be greatly appreciated
如果有人有任何想法可以指点我,将不胜感激
This is incorrect.这是不正确的。 This will call the
handleOpen
on component render.这将在组件渲染上调用
handleOpen
。
onChange={handleOpen(`panel${index}`)}
It should be an arrow function like so:它应该是一个箭头函数,如下所示:
onChange={() => handleOpen(`panel${index}`)}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.