Javascript 单击按钮时，MUI datatable可扩展行关闭

我试图更新mui datatables中可扩展行内的视图，但每次单击扩展行内的按钮时，整个扩展行都会折叠，这是我不希望看到的。我一直在不走运地浏览文档。但是，我发现在“onTableChange”函数中，会调用propsUpdate操作

这是我的密码：

    const [activeState, setActiveState] = useState(true);
    const [showPin, setShowPin] = useState(true);

    function cardStatus(active) {
        return (active) ? 'Freeze card': 'Unfreeze';
    }

    function changeCardStatus(id) {
        debitCards[id].active = !debitCards[id].active;
        setActiveState(cardStatus(debitCards[id].active));
    }

    const options = {
        elevation: 0,
        download: false,
        search: false,
        print: false,
        columns: false,
        selectableRows: 'none',
        viewColumns: false,
        filter: false,
        expandableRows: true,
        expandableRowsOnClick: true,
        renderExpandableRow: (index, rowMeta) => {
            
            const colSpan = index.length + 1;
            const cardIndex = Object.values(rowMeta).slice(0,1);           

            return (
                <TableRow>
                    <TableCell className={expandableRow} colSpan={colSpan}>
                        <div className={expandableRowContainer}>
                            <div className={cardDetails}>
                                <span className={cardNumber}>{debitCards[cardIndex].number}</span>
                                <span className={cardExpires}>Exp: {debitCards[cardIndex].expires}</span>
                                <span className={cardHolder}>{cardName}</span>
                            </div>
                            <div className={expandableRowActions}>
                                <h3>Card actions</h3>
                                <p>Did your card get stolen? Just freeze it 4Head</p>
                                <form className={changePinForm} hidden={showPin}>
                                    <TextField inputProps={{ maxLength: 4 }} size="small" variant="outlined" label="PIN" />
                                    <Button onClick={() => updatePin()} variant="outlined" color="primary">Update PIN</Button>
                                </form>
                                <div hidden={hideActionButtons}>
                                    <div className={actionButtons}>
                                        <Button onClick={() => { setShowPin(!showPin); setHideActionButtons(true)}} variant="outlined" color="primary">Change PIN</Button>
                                        <Button onClick={() => changeCardStatus(cardIndex)} variant="outlined" color="primary">{cardStatus(debitCards[cardIndex].active)}</Button>
                                    </div>
                                    <br />
                                    <div className={actionButtons}>
                                        <Button variant="outlined" color="primary">Block card</Button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    
                    </TableCell>
                </TableRow>
        );
        },
        onTableChange: function(action, tableState) {
            console.log(action);
            
        },
        rowsPerPage: 9,
        rowsPerPageOptions: [9],
        sort: true,
    };

const[activeState，setActiveState]=useState（true）；
const[showPin，setShowPin]=使用状态（true）；
功能卡状态（激活）{
返回（激活）-“冻结卡”：“解冻”；
}
功能更改卡状态（id）{
debitCards[id]。活动=！debitCards[id]。活动；
setActiveState（cardStatus（debitCards[id].active））；
}
常量选项={
海拔：0，
下载：错，
搜索：假，
印刷品：假，
列：false，
selectableRows:“无”，
viewColumns:false，
筛选器：false，
expandableRows：对，
可展开行单击：true，
renderExpandableRow:（索引，rowMeta）=>{
const colSpan=index.length+1；
const cardIndex=Object.values（rowMeta）.slice（0,1）；
返回(
{debitCards[cardIndex].number}
Exp:{debitCards[cardIndex].expires}
{cardName}
卡片操作
你的卡被偷了吗？把它冻结

updatePin（）}variant=“outline”color=“primary”>更新PIN
{setShowPin（！showPin）；setHideActionButtons（true）}variant=“outlined”color=“primary”>更改PIN
changeCardStatus（cardIndex）}variant=“outlined”color=“primary”>{cardStatus（debitCards[cardIndex].active）}


区块卡
);
},
onTableChange：函数（操作，表状态）{
控制台日志（操作）；
},
行页码：9，
rowsPerPageOptions:[9]，
排序：对，
};

---

希望有人能帮上忙：-）

一个有工作代码的沙箱会非常有用。不过，我认为您要查找的是按钮单击处理程序中的

e.preventDefault（）

。