MUI自动完成，在哪里得到的筛选选项的数组?

Question

我试图在popper内显示的每个选项下面添加一个<Divider />，除了最后一行。对不起，我不能发布图片，请点击这里查看不希望的结果的截图。

下面是当前代码:

import styled from "@emotion/styled";
import { Autocomplete, TextField, Box, Divider } from "@mui/material";
import "./styles.css";
const StyledTextField = styled(TextField)({
"& label, & label.Mui-focused": {
color: "green"
}
});
const StyledOptionBox = styled(Box)({
color: "green"
});
const options = [
"Company ABC",
"Company BCD",
"Company CDE",
"Company DEF",
"Company EFG",
"Corporate ABC",
"Corporate BCD",
"Corporate CDE",
"Corporate DEF",
"Corporate EFG"
];
export default function App() {
return (
<div className="App">
<Autocomplete
options={options}
renderInput={(params) => (
<StyledTextField
{...params}
label="Search your company here"
variant="outlined"
/>
)}
renderOption={(props, option) => (
<>
<li {...props}>
<StyledOptionBox>{option}</StyledOptionBox>
</li>
<Divider />
</>
)}
/>
</div>
);
}

链接到codeSandBox

我认为我应该这样做来解决这个问题:

• 我需要得到filteredOptions的数组，在我的情况下，当我输入company时，应该有一个5的数组。
• 如果option===filterOptions数组中的最后一项，则没有添加分隔符，如下面的代码片段所示。

renderOption={(props, option) => (
<>
<li {...props}>
<StyledOptionBox>{option}</StyledOptionBox>
</li>
{option !== filteredOptions[filteredOptions.length - 1] && <Divider />}
</>
)}

但是在阅读了MUI文档之后，我仍然不知道在哪里可以获得过滤选项的数组。任何想法?

或者有没有更好的方法来实现我想要做的事情?

Answer 1

乍一看，我看不出有什么简单的方法来完成这一点，你要么使用useAutocomplete创建一个自定义钩子，要么使用过滤器选项，另一个可能不理想的选择是简单地在你的渲染选项中将值推到更高作用域的变量。

例如:

在return

之外定义一个变量

let filteredOptions = [];

在自动补全

中

renderOption={(props, option) => {
filteredOptions.push(option)
return (
<>
<li {...props}>
<StyledOptionBox>{option}</StyledOptionBox>
</li>
{option !== filteredOptions[filteredOptions.length - 1] && <Divider />}
</>
)}}

工作示例:

import styled from "@emotion/styled";
import { Autocomplete, TextField, Box, Divider } from "@mui/material";
import "./styles.css";
const StyledTextField = styled(TextField)({
"& label, & label.Mui-focused": {
color: "green"
}
});
const StyledOptionBox = styled(Box)({
color: "green"
});
const options = [
"Company ABC",
"Company BCD",
"Company CDE",
"Company DEF",
"Company EFG",
"Corporate ABC",
"Corporate BCD",
"Corporate CDE",
"Corporate DEF",
"Corporate EFG"
];
export default function App() {
let filteredOptions = []
return (
<div className="App">
<Autocomplete
options={options}

renderInput={(params) => {
filteredOptions = []
return (
<StyledTextField
{...params}
label="Search your company here"
variant="outlined"
/>
)}}
renderOption={(props, option) => {
filteredOptions.push(option)
console.log(filteredOptions) 
return(
<>
<li {...props}>
<StyledOptionBox>{option}</StyledOptionBox>
</li>
<Divider />
</>
)}}
/>
</div>
);
}