Material UI自动完成组件(React)

Question

Material UI自动完成组件(React(-我正在开发自动完成组件，在React中键入值之前，默认情况下不会显示任何选项值。我在中看到的所有示例https://mui.com/material-ui/react-autocomplete/在关键焦点上显示选项值。有人知道我怎样才能做到这一点吗？我只想当用户开始在下面的代码中键入值时显示匹配的选项值：

import { Autocomplete, TextField } from '@mui/material';
const TestAutoComplete = () => {
const top100Films = [
{ title: 'The Shawshank Redemption', year: 1994 },
{ title: 'The Godfather', year: 1972 },
{ title: 'The Godfather: Part II', year: 1974 },
{ title: 'The Dark Knight', year: 2008 },
{ title: '12 Angry Men', year: 1957 },
{ title: "Schindler's List", year: 1993 },
{ title: 'Pulp Fiction', year: 1994 }
]
const flatProps = {
options: top100Films.map((option) => option.title),
};
return (
<Autocomplete
{...flatProps}
id="flat-demo"
renderInput={(params) => (
<TextField {...params}  label="Movie" />
)}
/>
)
};
export default TestAutoComplete;

Answer 1

只有在键入一些值之后，才能添加一个条件来呈现选项，比如

import React, { useState } from 'react';
import { Autocomplete, TextField } from '@mui/material';
const TestAutoComplete = () => {
const [value, setValue] = useState('');
const top100Films = [
{ title: 'The Shawshank Redemption', year: 1994 },
{ title: 'The Godfather', year: 1972 },
{ title: 'The Godfather: Part II', year: 1974 },
{ title: 'The Dark Knight', year: 2008 },
{ title: '12 Angry Men', year: 1957 },
{ title: "Schindler's List", year: 1993 },
{ title: 'Pulp Fiction', year: 1994 }
]

return (
<Autocomplete
inputValue={value}
onInputChange={(event, newValue) => setValue(newValue)}
options={
value.length > 0
? top100Films.map(option => option.title)
: []
}
id="flat-demo"
renderInput={params => <TextField {...params} label="Movie" />}
/>
)
};
export default TestAutoComplete;