从图像中可以看到,第一个输入字段是使用芯片的有效自动完成功能。
第二个输入字段始终是自动完成功能,但不起作用,在该字段中已在TextField中插入了一个按钮。
我想做的是将它们放在一起,即在第一种情况下具有自动完成功能,但内部具有一个按钮,可以为现代用户提供用户体验。
你能帮我吗?
链接:codesandbox
代码:
/* eslint-disable no-use-before-define */
import React from "react";
import { Button, InputAdornment } from "@material-ui/core";
import Autocomplete from "@material-ui/lab/Autocomplete";
import { makeStyles } from "@material-ui/core/styles";
import TextField from "@material-ui/core/TextField";
const useStyles = makeStyles(theme => ({
root: {
width: 500,
"& > * + *": {
marginTop: theme.spacing(3)
}
}
}));
export default function Tags() {
const classes = useStyles();
return (
<div className={classes.root}>
<Autocomplete
multiple
id="tags-outlined"
options={top100Films}
getOptionLabel={option => option.title}
defaultValue={[top100Films[13]]}
filterSelectedOptions
renderInput={params => (
<TextField
{...params}
variant="outlined"
label="filterSelectedOptions"
placeholder="Favorites"
/>
)}
/>
<Autocomplete
multiple
id="tags-outlined"
options={top100Films}
getOptionLabel={option => option.title}
defaultValue={[top100Films[13]]}
filterSelectedOptions
renderInput={params => (
<TextField
{...params}
variant="outlined"
label="filterSelectedOptions"
placeholder="Favorites"
InputProps={{
endAdornment: (
<InputAdornment position="end">
<Button variant="contained" color="primary" size="small">
Subscribe
</Button>
</InputAdornment>
)
}}
/>
)}
/>
</div>
);
}
const top100Films = [
{ title: "The Shawshank Redemption", year: 1994 },
{ title: "The Dark Knight", year: 2008 },
{ title: "12 Angry Men", year: 1957 },
{ title: "Schindler's List", year: 1993 },
{ title: "Pulp Fiction", year: 1994 },
{ title: "The Lord of the Rings: The Return of the King", year: 2003 },
{ title: "The Good, the Bad and the Ugly", year: 1966 }
];