javascript - 当我在 Material-ui 表中渲染一个按钮时,该按钮不可点击
问题描述
我的桌子看起来像这样:
<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>
表内的按钮被调用<ToggleButton/>
,它看起来像这样:
<ThemeProvider theme={filtersTheme}>
<Button variant="contained" color={handleColor()} onClick={console.log("Clicked")} >{risk}</Button>
</ThemeProvider>
表格一呈现,控制台就会显示“已单击”,这意味着一旦按钮由于某种原因呈现在表格内,就会调用 onClick 函数,但我无法单击它并触发 onClick 函数。有没有办法做到这一点?
解决方案
尝试像这样调用 onClick 函数:
onClick={() => { console.log('Clicked');
推荐阅读
- java - Spring boot + Embedded Kafka + h2 数据库 + 单元测试
- php - 从localhost传输后如何修复wordpress中的CSS?
- bash - 在 Kubernetes cloudsql 中使用特殊字符转义密码的问题
- ios - 如何根据我的 tableview 的 contentOffset 显示/隐藏自定义视图?
- angular - angular7上带有图像主体的Http请求
- react-native - 检查是否已设置导航状态参数对象
- python - 如何获得干净的 YouTube 成绩单
- scala - scala spark 使用 expr 在列内赋值
- tinymce - TinyMCE 中 MCE 的完整形式是什么?
- google-chrome-devtools - Chrome DevTools - SQL 查询未执行