当我在 material-ui table 中呈现按钮时，该按钮不可点击

Question

我的 table 看起来是这样的：

            <TableContainer component={Paper} style={{height: "40vh", width: "90vh"}}>
                <Table size="small" sx={{ minWidth: 200 }}>
                    <TableHead>
                        <TableRow>
                            <TableCell align="center" width="90"></TableCell>
                            {consequences_description.map((description) => (
                                <TableCell align="center" width="90">{description}</TableCell>
                                )
                            )}
                        </TableRow>
                    </TableHead>
                    <TableBody>    
    
                        {risk_matrix.map((row, row_index) => (
                        <TableRow
                            key={row_index}
                            sx={{ '&:last-child td, &:last-child th': { border: 0 } }}
                        >
                            <TableCell component="th" scope="row">
                                {likelyhood_description[row_index]}
                            </TableCell>
                            {row.map( (column, column_index) => (
                                <TableCell align="center">
                                    <ToggleButton 
                                        risk={column}
                                        row_index={row_index}
                                        column_index={column_index}
                                        />
                                </TableCell>
                            ))}
                        </TableRow>
                        ))}
    
                    </TableBody>
                </Table>
            </TableContainer>

table 中的按钮称为 <ToggleButton/>，它看起来是这样的：

        <ThemeProvider theme={filtersTheme}>    
          <Button variant="contained" color={handleColor()} onClick={console.log("Clicked")} >{risk}</Button>
        </ThemeProvider>

一旦 table 呈现，控制台就会显示“已点击”，这意味着由于某种原因，一旦它在 table 内呈现，就会为按钮调用 onClick 函数，但我我无法单击它并触发 onClick 函数。有办法吗？

Answer 1

试试这样调用onClick函数：

onClick={() => { console.log('Clicked');

当我在 material-ui table 中呈现按钮时，该按钮不可点击

When I render a button inside a material-ui table, the button is not clickable

javascript

jsx

reactjs

material-ui