在 materia-ui 表中。 當我單擊按鈕展開行時，它會展開所有行。 我怎樣才能使只有選定的行會擴大？

Question

Row Click事件展開數據表中的所有行顯示所有行的內部數據

展開按鈕單擊展開所有行而不是選定行。 每次我單擊按鈕展開第 1 行時，它也會展開第 2 行。 我該如何解決這個問題，只有特定的行會擴展？

 <Table stickyHeader aria-label="sticky table"> <TableHead> <TableRow hover> <TableCell>Title</TableCell> <TableCell>Created Date</TableCell> </TableRow> </TableHead> <TableBody> {data && data((index) => ( <TableRow hover> <TableCell> <IconButton aria-label="expand row" size="small" onClick={() => setOpen(!open)} > {open ? ( <KeyboardArrowUpIcon /> ) : ( <KeyboardArrowDownIcon /> )} </IconButton> </TableCell> <TableCell component="th" scope="row"> {index.title} </TableCell> <TableCell component="th" scope="row"> {new Date( index.createdDate.seconds * 1000 ).toDateString()} </TableCell> <TableCell colSpan={6}> <Collapse in={open} timeout="auto" unmountOnExit> {index.text} </Collapse> </TableCell> </TableRow> ))} </TableBody> </Table>

Answer 1

我能夠將索引添加到打開功能並只允許選定的行擴展。 它按預期工作，下面是我修改后的代碼

 <Table stickyHeader aria-label="sticky table"> <TableHead> <TableRow hover> <TableCell>Title</TableCell> <TableCell>Created Date</TableCell> </TableRow> </TableHead> <TableBody> {data && data((index) => ( <TableRow hover> <TableCell> <IconButton aria-label="expand row" size="small" onClick={() => setOpen(open === index ? -1 : index)} > {open == index ? ( <KeyboardArrowUpIcon /> ) : ( <KeyboardArrowDownIcon /> )} </IconButton> </TableCell> <TableCell component="th" scope="row"> {index.title} </TableCell> <TableCell component="th" scope="row"> {new Date( index.createdDate.seconds * 1000 ).toDateString()} </TableCell> <TableCell colSpan={6}> <Collapse in={open == index} timeout="auto" unmountOnExit> {index.text} </Collapse> </TableCell> </TableRow> ))} </TableBody> </Table>