React js material-ui 自动完成从renderInput中取出选中的元素并切换到textfield的InputProps

Question

我正在尝试使用Autocomplete的新版本，我想确保当从下拉菜单中选择一个元素时，我想修改文本字段的输入输入，以便能够将带有所选文本的芯片放入其中。

有没有办法知道在autocompleterenderInput选中的项？ 然后将此信息传递给文本字段的InputProps。

Codesandbox

import React from "react";
import Checkbox from "@material-ui/core/Checkbox";
import TextField from "@material-ui/core/TextField";
import Autocomplete from "@material-ui/lab/Autocomplete";
import CheckBoxOutlineBlankIcon from "@material-ui/icons/AccessAlarm";
import CheckBoxIcon from "@material-ui/icons/CheckBox";

import { makeStyles, Paper, MenuItem, Chip } from "@material-ui/core";

const icon = <CheckBoxOutlineBlankIcon fontSize="small" />;
const checkedIcon = <CheckBoxIcon fontSize="small" />;

export default function CheckboxesTags() {
  return (
    <Autocomplete
      id="checkboxes-tags-demo"
      options={top100Films}
      //disableCloseOnSelect
      getOptionLabel={option => option.title}
      renderOption={(option, { selected }) => (
        <React.Fragment>{option.title}</React.Fragment>
      )}
      style={{ width: 500 }}
      renderInput={params => {
        //console.log("params",params)
        return (
          <TextField
            {...params}
            //variant="outlined"
            label="Label"
            placeholder="Placeholder"
            fullWidth
            /*InputProps={{
            startAdornment: params.inputProps.value && params.inputProps["aria-controls"] === null && (
              <Chip
                label={params.inputProps.value}
                style={{
                  backgroundColor: "#007bcc",
                  color: "#fff"
                }}
              />
            )
          }}*/
          />
        );
      }}
    />
  );
}

// Top 100 films as rated by IMDb users. http://www.imdb.com/chart/top
const top100Films = [
  { title: "The Shawshank Redemption", year: 1994 },
  { title: "The Godfather", year: 1972 },
  { title: "The Godfather: Part II", year: 1974 },
  { 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 },
  { title: "Fight Club", year: 1999 },
  { title: "The Lord of the Rings: The Fellowship of the Ring", year: 2001 },
  { title: "Star Wars: Episode V - The Empire Strikes Back", year: 1980 },
  { title: "Forrest Gump", year: 1994 },
  { title: "Inception", year: 2010 },
  { title: "The Lord of the Rings: The Two Towers", year: 2002 },
  { title: "One Flew Over the Cuckoo's Nest", year: 1975 },
  { title: "Goodfellas", year: 1990 },
  { title: "The Matrix", year: 1999 },
  { title: "Seven Samurai", year: 1954 },
  { title: "Star Wars: Episode IV - A New Hope", year: 1977 },
  { title: "City of God", year: 2002 },
  { title: "Se7en", year: 1995 },
  { title: "The Silence of the Lambs", year: 1991 },
  { title: "It's a Wonderful Life", year: 1946 },
  { title: "Life Is Beautiful", year: 1997 },
  { title: "The Usual Suspects", year: 1995 },
  { title: "Léon: The Professional", year: 1994 },
  { title: "Spirited Away", year: 2001 },
  { title: "Saving Private Ryan", year: 1998 },
  { title: "Once Upon a Time in the West", year: 1968 },
  { title: "American History X", year: 1998 },
  { title: "Interstellar", year: 2014 }
];

我希望我最终能做的事情是这样的： react-textinput-chip

Answer 1

我觉得你可以试试 renderTags：

renderTags={(tagValue, getTagProps) => {
  return tagValue.map((option, index) => (
    <MyChip {...getTagProps({ index })} label={option.title} />
  ));
 }}

Answer 2

据我在他们的Customized Autocomplete example 中看到的，您可以将这些参数用于所选项目：

renderOption={(option, { selected }) => (...)}