您可以在下面找到有关自动完成的 MUI 文档的示例,其中我在选项列表之前传递了一个指向 google 的链接。但是,我无法单击该选项,事件目标只是 MuiAutocomplete,而不是<a>我正在传递的。
import React from "react";
import TextField from "@material-ui/core/TextField";
import Paper from "@material-ui/core/Paper";
import Autocomplete from "@material-ui/lab/Autocomplete";
const Link = ({ children }) => (
<Paper>
<a href="https://www.google.com/" rel="nofollow" target="_blank">
Go to Google
</a>
{children}
</Paper>
);
export default function ComboBox() {
return (
<Autocomplete
id="combo-box-demo"
options={top100Films}
getOptionLabel={option => option.title}
style={{ width: 300 }}
renderInput={params => (
<TextField {...params} label="Combo box" variant="outlined" fullWidth />
)}
PaperComponent={Link}
/>
);
}
Run Code Online (Sandbox Code Playgroud)
https://codesandbox.io/s/material-demo-egi6p
有趣的是,打开自动完成功能
<Autocomplete
open …Run Code Online (Sandbox Code Playgroud)