如何解决禁用键盘句柄 AppBar TabPanel MUI
我有一个带有 AppBar/TabPanel 的 Menu 和带有 Textfield 的 MenuItem :
<Menu
anchorEl={anchorEl}
anchorOrigin={{ vertical: 'top',horizontal: 'right' }}
id={menuId}
keepMounted
transformOrigin={{ vertical: 'top',horizontal: 'right' }}
open={isMenuOpen}
onClose={handleMenuClose}
style={{zIndex: 1401,marginTop: "55px"}}
className={classes.renderMenu}
elevation={5}
>
<AppBar position="static" style={{ marginTop: '-10px' }}>
<Tabs value={value} onChange={handleChange} aria-label="simple tabs example">
<Tab label="Connexion" {...a11yProps(0)} />
<Tab label="Inscription" {...a11yProps(1)} />
</Tabs>
</AppBar>
<TabPanel value={value} index={0}>
<form className={classes.container} onSubmit={handleLoginSubmit} >
<MenuItem >
<TextField
error={Boolean(emailLoginError)}
helperText={Boolean(emailLoginError) ? emailLoginError : ''}
className={classes.marginForm}
onChange={handleChangeEmailLogin}
id="email-login-id-2"
label="Email"
type="email"
InputLabelProps={{
classes: {
root: classes.label,focused: classes.focusedLabel,error: classes.erroredLabel
},}}
InputProps={{
startAdornment: (
<InputAdornment position="start">
<AccountCircle />
</InputAdornment>
),}}
/>
</MenuItem>
......
问题是,如果我在文本字段中按 C 键,它会触发 TabPanel 并从文本字段中删除光标...当您要填写表单时非常烦人。
我的目标是避免这种姿态。我试图捕获 TabPanel、Textfield 和 Menu 上的 C 键按下,但没有成功...
onKeyPress={ (e) => {
if (e.key === 'c') {
console.log('Enter key pressed');
// write your functionality here
}
}}
帮助将不胜感激
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。