MenuItem 中的 TextField 导致 nextFocus.getAttribute 不是函数
TextField in MenuItem causes nextFocus.getAttribute is not a function
我创建了一个 Menu
和 Material UI,点击按钮时会弹出。此 Menu
显示一个动态的 id 列表,可以使用位于菜单顶部的 Textfield
进行过滤。但是当我在文本字段中输入时出现错误:Uncaught TypeError: nextFocus.getAttribute is not a function
.
我不知道什么会导致这个问题以及如何解决它。
这是上图中显示的 SearchableFilter
组件的代码。我在代码中删除了一些不必要的样式
const SearchableFilter = ({ values, label, setState, state }) => {
const classes = useStyles();
const [focused, setFocused] = React.useState(false);
const [anchorEl, setAnchorEl] = React.useState(null);
const [searchValue, setSearchValue] = useState("");
const openMenu = (event) => {
setFocused(true);
setAnchorEl(event.currentTarget);
};
const selectItem = (value) => {
handleClose();
setState(value);
};
const handleDelete = () => {
setState("");
};
const handleChange = (event) => {
return setSearchValue(event.target.value);
};
const filteredValues = values.filter((value) =>
value.includes(searchValue.trim())
);
const handleClose = () => {
setFocused(false);
setAnchorEl(null);
};
return (
<div className={classes.margin}>
<Button
aria-controls="simple-menu"
aria-haspopup="true"
onClick={openMenu}
disableRipple
endIcon={<ArrowDropDownIcon color={state && "primary"} />}
>
{label}
</Button>
<Menu
id="menu-appbar"
anchorEl={anchorEl}
getContentAnchorEl={null}
anchorOrigin={{ vertical: "bottom", horizontal: "left" }}
open={Boolean(anchorEl)}
elevation={2}
onClose={handleClose}
>
<MenuItem
button={false}
dense={true}
key="input"
className={classes.menuItem}
>
<TextField
id="input"
label="Search"
value={searchValue}
onChange={handleChange}
/>
</MenuItem>
<List style={{ maxHeight: "300px", overflow: "auto" }}>
{filteredValues.map((value) => (
<MenuItem
key={value}
dense={true}
className={classes.menuItem}
disableGutters={true}
onClick={() => selectItem(value)}
>
{value}
</MenuItem>
))}
</List>
</Menu>
</div>
);
};
完整错误:
Uncaught TypeError: nextFocus.getAttribute is not a function
at moveFocus (MenuList.js:76)
at handleKeyDown (MenuList.js:188)
at HTMLUnknownElement.callCallback (react-dom.development.js:3945)
at Object.invokeGuardedCallbackDev (react-dom.development.js:3994)
at invokeGuardedCallback (react-dom.development.js:4056)
at invokeGuardedCallbackAndCatchFirstError (react-dom.development.js:4070)
at executeDispatch (react-dom.development.js:8243)
at processDispatchQueueItemsInOrder (react-dom.development.js:8275)
at processDispatchQueue (react-dom.development.js:8288)
at dispatchEventsForPlugins (react-dom.development.js:8299)
at react-dom.development.js:8508
at batchedEventUpdates (react-dom.development.js:22396)
at batchedEventUpdates (react-dom.development.js:3745)
at dispatchEventForPluginEventSystem (react-dom.development.js:8507)
at attemptToDispatchEvent (react-dom.development.js:6005)
at dispatchEvent (react-dom.development.js:5924)
at unstable_runWithPriority (scheduler.development.js:468)
at runWithPriority (react-dom.development.js:11276)
at discreteUpdates (react-dom.development.js:22413)
at discreteUpdates (react-dom.development.js:3756)
at dispatchDiscreteEvent (react-dom.development.js:5889)
编辑:
这是一个显示错误的 CodeSandBox:
@Ryan Cogswell 在评论中提供的答案。
将 onKeyDown
道具添加到 TextField
的父级 MenuItem
解决了我的问题。
<MenuItem
button={false}
onKeyDown={e => e.stopPropagation()}
>
<TextField
onChange={handleChange}
value={value}
/>
</MenuItem>
正如 JonasLevin 的回答。
如果您有任何 div 或其他元素包装 Textfield ,您应该添加
onKeyDown={e => e.stopPropagation()}
那个元素
我创建了一个 Menu
和 Material UI,点击按钮时会弹出。此 Menu
显示一个动态的 id 列表,可以使用位于菜单顶部的 Textfield
进行过滤。但是当我在文本字段中输入时出现错误:Uncaught TypeError: nextFocus.getAttribute is not a function
.
我不知道什么会导致这个问题以及如何解决它。
这是上图中显示的 SearchableFilter
组件的代码。我在代码中删除了一些不必要的样式
const SearchableFilter = ({ values, label, setState, state }) => {
const classes = useStyles();
const [focused, setFocused] = React.useState(false);
const [anchorEl, setAnchorEl] = React.useState(null);
const [searchValue, setSearchValue] = useState("");
const openMenu = (event) => {
setFocused(true);
setAnchorEl(event.currentTarget);
};
const selectItem = (value) => {
handleClose();
setState(value);
};
const handleDelete = () => {
setState("");
};
const handleChange = (event) => {
return setSearchValue(event.target.value);
};
const filteredValues = values.filter((value) =>
value.includes(searchValue.trim())
);
const handleClose = () => {
setFocused(false);
setAnchorEl(null);
};
return (
<div className={classes.margin}>
<Button
aria-controls="simple-menu"
aria-haspopup="true"
onClick={openMenu}
disableRipple
endIcon={<ArrowDropDownIcon color={state && "primary"} />}
>
{label}
</Button>
<Menu
id="menu-appbar"
anchorEl={anchorEl}
getContentAnchorEl={null}
anchorOrigin={{ vertical: "bottom", horizontal: "left" }}
open={Boolean(anchorEl)}
elevation={2}
onClose={handleClose}
>
<MenuItem
button={false}
dense={true}
key="input"
className={classes.menuItem}
>
<TextField
id="input"
label="Search"
value={searchValue}
onChange={handleChange}
/>
</MenuItem>
<List style={{ maxHeight: "300px", overflow: "auto" }}>
{filteredValues.map((value) => (
<MenuItem
key={value}
dense={true}
className={classes.menuItem}
disableGutters={true}
onClick={() => selectItem(value)}
>
{value}
</MenuItem>
))}
</List>
</Menu>
</div>
);
};
完整错误:
Uncaught TypeError: nextFocus.getAttribute is not a function
at moveFocus (MenuList.js:76)
at handleKeyDown (MenuList.js:188)
at HTMLUnknownElement.callCallback (react-dom.development.js:3945)
at Object.invokeGuardedCallbackDev (react-dom.development.js:3994)
at invokeGuardedCallback (react-dom.development.js:4056)
at invokeGuardedCallbackAndCatchFirstError (react-dom.development.js:4070)
at executeDispatch (react-dom.development.js:8243)
at processDispatchQueueItemsInOrder (react-dom.development.js:8275)
at processDispatchQueue (react-dom.development.js:8288)
at dispatchEventsForPlugins (react-dom.development.js:8299)
at react-dom.development.js:8508
at batchedEventUpdates (react-dom.development.js:22396)
at batchedEventUpdates (react-dom.development.js:3745)
at dispatchEventForPluginEventSystem (react-dom.development.js:8507)
at attemptToDispatchEvent (react-dom.development.js:6005)
at dispatchEvent (react-dom.development.js:5924)
at unstable_runWithPriority (scheduler.development.js:468)
at runWithPriority (react-dom.development.js:11276)
at discreteUpdates (react-dom.development.js:22413)
at discreteUpdates (react-dom.development.js:3756)
at dispatchDiscreteEvent (react-dom.development.js:5889)
编辑:
这是一个显示错误的 CodeSandBox:
@Ryan Cogswell 在评论中提供的答案。
将 onKeyDown
道具添加到 TextField
的父级 MenuItem
解决了我的问题。
<MenuItem
button={false}
onKeyDown={e => e.stopPropagation()}
>
<TextField
onChange={handleChange}
value={value}
/>
</MenuItem>
正如 JonasLevin 的回答。
如果您有任何 div 或其他元素包装 Textfield ,您应该添加 onKeyDown={e => e.stopPropagation()} 那个元素