禁用键盘句柄 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 导航，如您在图片上所见

我的目标是避免这种姿态​​。我试图捕获 TabPanel、Textfield 和 Menu 上的 C 键按下，但没有成功...

onKeyPress={ (e) => {
                        if (e.key === 'c') {
                          console.log('Enter key pressed');
                          // write your functionality here
                        }
                }}

帮助将不胜感激

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）