Javascript React js material ui自动完成芯片，内置按钮

从图中可以看出，第一个输入字段是一个使用芯片的自动完成工作

第二个输入字段始终是一个自动完成但不起作用的字段，其中在文本字段中插入了一个按钮

我想做的是把它们放在一起，也就是像第一种情况一样有一个自动完成，但是里面有一个按钮，给现代用户提供用户体验

你能帮我吗

链接：

代码：

/* 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 }
];

/*eslint在定义前禁用no use*/
从“React”导入React；
从“@material ui/core”导入{按钮，输入}；
从“@material ui/lab/Autocomplete”导入自动完成；
从“@material ui/core/styles”导入{makeStyles}”；
从“@material ui/core/TextField”导入TextField；
const useStyles=makeStyles（主题=>({
根目录：{
宽度：500，
"& > * + *": {
marginTop：主题。间距（3）
}
}
}));
导出默认函数标记（）{
const classes=useStyles（）；
返回(
选项.title}
defaultValue={[top100Films[13]]}
过滤器选择选项
renderInput={params=>(
)}
/>
选项.title}
defaultValue={[top100Films[13]]}
过滤器选择选项
renderInput={params=>(
)}
/>
);
}
常数TOP100胶片=[
{标题：《肖申克的救赎》，年份：1994}，
{标题：“黑暗骑士”，年份：2008}，
{标题：“12个愤怒的男人”，年份：1957}，
{标题：“辛德勒名单”，年份：1993}，
{标题：“低俗小说”，年份：1994}，
{标题：“指环王：国王的回归”，年份：2003}，
{标题：“好、坏、丑”，年份：1966}
];