reactjs React MUI：自动完成用作弹出窗口 |
您所在的位置：网站首页 › js弹出下拉框 › reactjs React MUI：自动完成用作弹出窗口 |
reactjs React MUI：自动完成用作弹出窗口
|
"我想做的事"我正在尝试实现包含TextInput元素的控件，该元素在单击时打开Popover，其中嵌入了Autocomplete。当我单击TextInput时，我正在尝试将焦点放在建议列表（Autocomplete的Popper元素）上。 为什么我需要它**这就是它的方式（或至少这是我们的客户想要的）我的代码是什么**这里是我的代码的简化版本import "./styles.css"; import Box from "@mui/material/Box"; import TextField from "@mui/material/TextField"; import Autocomplete from "@mui/material/Autocomplete"; import Popper from "@mui/material/Popper"; import { createRef, useCallback, useState } from "react"; import Popover from "@mui/material/Popover"; export default function App() { const [anchorEl, setAnchorEl] = useState(null); const textFieldRef = createRef(); const handleClick = useCallback(() => { setAnchorEl(textFieldRef.current); }, [textFieldRef]); const handleClose = useCallback(() => { setAnchorEl(null); }, []); const open = Boolean(anchorEl); return ( } renderOption={(props, option) => ( {option} )} renderInput={(params) => ( )} /> ); }问题是什么**Poppover的焦点位置错误，如下所示
当我单击Autocomplete（或者通常是重新呈现屏幕）时，它会自动更正
|
【本文地址】
今日新闻 |
推荐新闻 |