我需要与搜索输入选择组件作为下拉列表中的第一个选项。就像这样:
主要的问题是搜索组件从输入中正常运行。我不知道如何让它聚焦。谢谢你。
qyyhg6bp1#
这是因为MenuItem是Select组件的直接子组件。其作用方式与“选定”菜单文档中所述相同。您可以看到,当打开Menu(或者在我们的示例中是Select)时,焦点会自动放在选定的MenuItem上。这就是为什么TextField首先会失去焦点(即使我们给它附加了一个autoFocus属性)。好的,我们可以简单地在TextField上使用useRef钩子,然后在Select打开时调用focus()方法。就像这样:
MenuItem
Select
Menu
TextField
autoFocus
useRef
focus()
var inputRef = useRef(undefined); ... <Select onAnimationEnd={() -> inputRef.current.focus()} ... > ... <TextField ref={inputRef} ... /> ... </Select>
”””没有那么快,有一个陷阱!**这里的东西打破:您打开了选择窗口,焦点如预期的那样转移到输入字段。然后插入将过滤掉当前选定值的搜索文本。现在,如果你用退格键删除文本,直到当前选中的项目再次出现,你会看到焦点将自动从输入字段放置到当前选中的选项。这可能看起来像是一个可行的解决方案,但你可以看到用户体验受到的影响,我们没有得到我们想要的预期稳定的行为。
我发现你的问题有点模糊,没有任何代码和适当的解释,但我仍然觉得它很有用,因为我正在寻找与你完全相同的解决方案:可搜索的选择MUI组件,具有良好的用户体验。所以请注意,这是我对你想要的工作解决方案的假设。这里有一个CodeSandbox和我的工作解决方案。所有重要的部分都在代码注解和这里解释:
MenuProps={{ autoFocus: false }}
ListSubheader
renderValue
onKeyDown
6bc51xsx2#
MUI自动完成组件可能正是您所需要的[https://mui.com/components/autocomplete/](MUI自动完成)自动完成是MUI库提供的组件。它具有与选择选项相同的功能,此外还提供了搜索选项沿着其他改善开发人员体验的选项。下面是自动完成组件的一个小片段:
import * as React from 'react'; import TextField from '@mui/material/TextField'; import Autocomplete from '@mui/material/Autocomplete'; export default function ComboBox() { return ( <Autocomplete disablePortal id="combo-box-demo" options={top100Films} sx={{ width: 300 }} renderInput={(params) => <TextField {...params} label="Movie" />} /> ); } // Top 100 films as rated by IMDb users. http://www.imdb.com/chart/top const top100Films = [ { label: 'The Shawshank Redemption', year: 1994 }, { label: 'The Godfather', year: 1972 }, { label: 'The Godfather: Part II', year: 1974 }, { label: 'The Dark Knight', year: 2008 }, { label: '12 Angry Men', year: 1957 }, { label: "Schindler's List", year: 1993 }, { label: 'Pulp Fiction', year: 1994 }, { label: 'The Lord of the Rings: The Return of the King', year: 2003, }, { label: 'The Good, the Bad and the Ugly', year: 1966 }, { label: 'Fight Club', year: 1999 }, { label: 'The Lord of the Rings: The Fellowship of the Ring', year: 2001, }, { label: 'Star Wars: Episode V - The Empire Strikes Back', year: 1980, }, { label: 'Forrest Gump', year: 1994 }, { label: 'Inception', year: 2010 }, { label: 'The Lord of the Rings: The Two Towers', year: 2002, }, { label: "One Flew Over the Cuckoo's Nest", year: 1975 }, { label: 'Goodfellas', year: 1990 }, { label: 'The Matrix', year: 1999 }, { label: 'Seven Samurai', year: 1954 }, { label: 'Star Wars: Episode IV - A New Hope', year: 1977, }, { label: 'City of God', year: 2002 }, { label: 'Se7en', year: 1995 }, { label: 'The Silence of the Lambs', year: 1991 }, { label: "It's a Wonderful Life", year: 1946 }, { label: 'Life Is Beautiful', year: 1997 }, { label: 'The Usual Suspects', year: 1995 }, { label: 'Léon: The Professional', year: 1994 }, { label: 'Spirited Away', year: 2001 }, { label: 'Saving Private Ryan', year: 1998 }, { label: 'Once Upon a Time in the West', year: 1968 }, { label: 'American History X', year: 1998 }, { label: 'Interstellar', year: 2014 }, { label: 'Casablanca', year: 1942 }, { label: 'City Lights', year: 1931 }, { label: 'Psycho', year: 1960 }, { label: 'The Green Mile', year: 1999 }, { label: 'The Intouchables', year: 2011 }, { label: 'Modern Times', year: 1936 }, { label: 'Raiders of the Lost Ark', year: 1981 }, { label: 'Rear Window', year: 1954 }, { label: 'The Pianist', year: 2002 }, { label: 'The Departed', year: 2006 }, { label: 'Terminator 2: Judgment Day', year: 1991 }, { label: 'Back to the Future', year: 1985 }, { label: 'Whiplash', year: 2014 }, { label: 'Gladiator', year: 2000 }, { label: 'Memento', year: 2000 }, { label: 'The Prestige', year: 2006 }, { label: 'The Lion King', year: 1994 }, { label: 'Apocalypse Now', year: 1979 }, { label: 'Alien', year: 1979 }, { label: 'Sunset Boulevard', year: 1950 }, { label: 'Dr. Strangelove or: How I Learned to Stop Worrying and Love the Bomb', year: 1964, }, { label: 'The Great Dictator', year: 1940 }, { label: 'Cinema Paradiso', year: 1988 }, { label: 'The Lives of Others', year: 2006 }, { label: 'Grave of the Fireflies', year: 1988 }, { label: 'Paths of Glory', year: 1957 }, { label: 'Django Unchained', year: 2012 }, { label: 'The Shining', year: 1980 }, { label: 'WALL·E', year: 2008 }, { label: 'American Beauty', year: 1999 }, { label: 'The Dark Knight Rises', year: 2012 }, { label: 'Princess Mononoke', year: 1997 }, { label: 'Aliens', year: 1986 }, { label: 'Oldboy', year: 2003 }, { label: 'Once Upon a Time in America', year: 1984 }, { label: 'Witness for the Prosecution', year: 1957 }, { label: 'Das Boot', year: 1981 }, { label: 'Citizen Kane', year: 1941 }, { label: 'North by Northwest', year: 1959 }, { label: 'Vertigo', year: 1958 }, { label: 'Star Wars: Episode VI - Return of the Jedi', year: 1983, }, { label: 'Reservoir Dogs', year: 1992 }, { label: 'Braveheart', year: 1995 }, { label: 'M', year: 1931 }, { label: 'Requiem for a Dream', year: 2000 }, { label: 'Amélie', year: 2001 }, { label: 'A Clockwork Orange', year: 1971 }, { label: 'Like Stars on Earth', year: 2007 }, { label: 'Taxi Driver', year: 1976 }, { label: 'Lawrence of Arabia', year: 1962 }, { label: 'Double Indemnity', year: 1944 }, { label: 'Eternal Sunshine of the Spotless Mind', year: 2004, }, { label: 'Amadeus', year: 1984 }, { label: 'To Kill a Mockingbird', year: 1962 }, { label: 'Toy Story 3', year: 2010 }, { label: 'Logan', year: 2017 }, { label: 'Full Metal Jacket', year: 1987 }, { label: 'Dangal', year: 2016 }, { label: 'The Sting', year: 1973 }, { label: '2001: A Space Odyssey', year: 1968 }, { label: "Singin' in the Rain", year: 1952 }, { label: 'Toy Story', year: 1995 }, { label: 'Bicycle Thieves', year: 1948 }, { label: 'The Kid', year: 1921 }, { label: 'Inglourious Basterds', year: 2009 }, { label: 'Snatch', year: 2000 }, { label: '3 Idiots', year: 2009 }, { label: 'Monty Python and the Holy Grail', year: 1975 }, ];
2条答案
按热度按时间qyyhg6bp1#
问题说明
这是因为
MenuItem
是Select
组件的直接子组件。其作用方式与“选定”菜单文档中所述相同。您可以看到,当打开Menu
(或者在我们的示例中是Select
)时,焦点会自动放在选定的MenuItem
上。这就是为什么TextField
首先会失去焦点(即使我们给它附加了一个autoFocus
属性)。好的,我们可以简单地在
TextField
上使用useRef
钩子,然后在Select
打开时调用focus()
方法。就像这样:”””没有那么快,有一个陷阱!**
这里的东西打破:您打开了选择窗口,焦点如预期的那样转移到输入字段。然后插入将过滤掉当前选定值的搜索文本。现在,如果你用退格键删除文本,直到当前选中的项目再次出现,你会看到焦点将自动从输入字段放置到当前选中的选项。这可能看起来像是一个可行的解决方案,但你可以看到用户体验受到的影响,我们没有得到我们想要的预期稳定的行为。
解决方案
我发现你的问题有点模糊,没有任何代码和适当的解释,但我仍然觉得它很有用,因为我正在寻找与你完全相同的解决方案:可搜索的选择MUI组件,具有良好的用户体验。所以请注意,这是我对你想要的工作解决方案的假设。
这里有一个CodeSandbox和我的工作解决方案。所有重要的部分都在代码注解和这里解释:
MenuProps={{ autoFocus: false }}
属性添加到Select
组件,并将autoFocus
属性添加到TextField
组件。TextField
放入ListSubheader
中,这样它就不会作为菜单中的可选项。即,我们可以点击搜索输入而不触发任何选择。renderValue
函数。如果搜索文本将排除当前选定的选项,这将防止在Select的值字段中呈现空字符串。onKeyDown
函数禁用了TextField
上的事件传播。这将防止在键入时自动选择项目(这是默认的Select
行为)6bc51xsx2#
MUI自动完成组件可能正是您所需要的[https://mui.com/components/autocomplete/](MUI自动完成)
自动完成是MUI库提供的组件。它具有与选择选项相同的功能,此外还提供了搜索选项沿着其他改善开发人员体验的选项。下面是自动完成组件的一个小片段: