React js材料ui自动完成芯片，里面有一个按钮答案

【问题标题】：React js material ui autocomplete chips with a button insideReact js材料ui自动完成芯片，里面有一个按钮
【发布时间】：2020-06-18 23:29:13
【问题描述】：

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

第二个输入字段始终是自动完成但不起作用，其中一个按钮已插入到 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 }
];

【问题讨论】：

标签： javascript reactjs autocomplete material-ui

【解决方案1】：

我知道我迟到了，但在第二次自动完成中，您将覆盖 {...params} 中的 InputProps。为了使自动完成和按钮起作用，您必须像这样设置 InpurProps：

renderInput={(params) => (
    <TextField
      {...params}
      label="Select a place"
      placeholder="Place"
      InputProps={{
        ...params.InputProps,
        endAdornment: (
          <Stack direction="row" spacing={1}>
            <Button>Subscribe</Button>
            {params.InputProps.endAdornment}
          </Stack>
        ),
      }}
    />
  )}

以上示例使用了 mui v5。

【讨论】：