让 mui 自动完成在选择后保留输入值

Question

输入值并在 Material-UI Autocomplete with Multiple 中选择一个选项后，输入的值将被清除。

\n

\n

有没有办法让自动完成功能在选择后仍保留键入的值？就像下面这个...

\n

\n

演示：https://codesandbox.io/s/material-demo-forked-cv1f5

\n

/* eslint-disable no-use-before-define */\nimport React from "react";\nimport Chip from "@material-ui/core/Chip";\nimport Autocomplete from "@material-ui/lab/Autocomplete";\nimport { makeStyles } from "@material-ui/core/styles";\nimport TextField from "@material-ui/core/TextField";\n\nconst useStyles = makeStyles((theme) => ({\n  root: {\n    width: 500,\n    "& > * + *": {\n      marginTop: theme.spacing(3)\n    }\n  }\n}));\n\nexport default function Tags() {\n  const classes = useStyles();\n\n  return (\n    <div className={classes.root}>\n      <Autocomplete\n        multiple\n        id="tags-standard"\n        options={top100Films}\n        getOptionLabel={(option) => option.title}\n        //defaultValue={[top100Films[13]]}\n        renderInput={(params) => (\n          <TextField\n            {...params}\n            variant="standard"\n            label="Multiple values"\n            placeholder="Favorites"\n          />\n        )}\n      />\n    </div>\n  );\n}\n\n// Top 100 films as rated by IMDb users. http://www.imdb.com/chart/top\nconst top100Films = [\n  { title: "The Shawshank Redemption", year: 1994 },\n  { title: "The Godfather", year: 1972 },\n  { title: "The Godfather: Part II", year: 1974 },\n  { title: "The Dark Knight", year: 2008 },\n  { title: "12 Angry Men", year: 1957 },\n  { title: "Schindler\'s List", year: 1993 },\n  { title: "Pulp Fiction", year: 1994 },\n  { title: "The Lord of the Rings: The Return of the King", year: 2003 },\n  { title: "The Good, the Bad and the Ugly", year: 1966 },\n  { title: "Fight Club", year: 1999 },\n  { title: "The Lord of the Rings: The Fellowship of the Ring", year: 2001 },\n  { title: "Star Wars: Episode V - The Empire Strikes Back", year: 1980 },\n  { title: "Forrest Gump", year: 1994 },\n  { title: "Inception", year: 2010 },\n  { title: "The Lord of the Rings: The Two Towers", year: 2002 },\n  { title: "One Flew Over the Cuckoo\'s Nest", year: 1975 },\n  { title: "Goodfellas", year: 1990 },\n  { title: "The Matrix", year: 1999 },\n  { title: "Seven Samurai", year: 1954 },\n  { title: "Star Wars: Episode IV - A New Hope", year: 1977 },\n  { title: "City of God", year: 2002 },\n  { title: "Se7en", year: 1995 },\n  { title: "The Silence of the Lambs", year: 1991 },\n  { title: "It\'s a Wonderful Life", year: 1946 },\n  { title: "Life Is Beautiful", year: 1997 },\n  { title: "The Usual Suspects", year: 1995 },\n  { title: "L\xc3\xa9on: The Professional", year: 1994 },\n  { title: "Spirited Away", year: 2001 },\n  { title: "Saving Private Ryan", year: 1998 },\n  { title: "Once Upon a Time in the West", year: 1968 },\n  { title: "American History X", year: 1998 },\n  { title: "Interstellar", year: 2014 },\n  { title: "Casablanca", year: 1942 },\n  { title: "City Lights", year: 1931 },\n  { title: "Psycho", year: 1960 },\n  { title: "The Green Mile", year: 1999 },\n  { title: "The Intouchables", year: 2011 },\n  { title: "Modern Times", year: 1936 },\n  { title: "Raiders of the Lost Ark", year: 1981 },\n  { title: "Rear Window", year: 1954 },\n  { title: "The Pianist", year: 2002 },\n  { title: "The Departed", year: 2006 },\n  { title: "Terminator 2: Judgment Day", year: 1991 },\n  { title: "Back to the Future", year: 1985 },\n  { title: "Whiplash", year: 2014 },\n  { title: "Gladiator", year: 2000 },\n  { title: "Memento", year: 2000 },\n  { title: "The Prestige", year: 2006 },\n  { title: "The Lion King", year: 1994 },\n  { title: "Apocalypse Now", year: 1979 },\n  { title: "Alien", year: 1979 },\n  { title: "Sunset Boulevard", year: 1950 },\n  {\n    title:\n      "Dr. Strangelove or: How I Learned to Stop Worrying and Love the Bomb",\n    year: 1964\n  },\n  { title: "The Great Dictator", year: 1940 },\n  { title: "Cinema Paradiso", year: 1988 },\n  { title: "The Lives of Others", year: 2006 },\n  { title: "Grave of the Fireflies", year: 1988 },\n  { title: "Paths of Glory", year: 1957 },\n  { title: "Django Unchained", year: 2012 },\n  { title: "The Shining", year: 1980 },\n  { title: "WALL\xc2\xb7E", year: 2008 },\n  { title: "American Beauty", year: 1999 },\n  { title: "The Dark Knight Rises", year: 2012 },\n  { title: "Princess Mononoke", year: 1997 },\n  { title: "Aliens", year: 1986 },\n  { title: "Oldboy", year: 2003 },\n  { title: "Once Upon a Time in America", year: 1984 },\n  { title: "Witness for the Prosecution", year: 1957 },\n  { title: "Das Boot", year: 1981 },\n  { title: "Citizen Kane", year: 1941 },\n  { title: "North by Northwest", year: 1959 },\n  { title: "Vertigo", year: 1958 },\n  { title: "Star Wars: Episode VI - Return of the Jedi", year: 1983 },\n  { title: "Reservoir Dogs", year: 1992 },\n  { title: "Braveheart", year: 1995 },\n  { title: "M", year: 1931 },\n  { title: "Requiem for a Dream", year: 2000 },\n  { title: "Am\xc3\xa9lie", year: 2001 },\n  { title: "A Clockwork Orange", year: 1971 },\n  { title: "Like Stars on Earth", year: 2007 },\n  { title: "Taxi Driver", year: 1976 },\n  { title: "Lawrence of Arabia", year: 1962 },\n  { title: "Double Indemnity", year: 1944 },\n  { title: "Eternal Sunshine of the Spotless Mind", year: 2004 },\n  { title: "Amadeus", year: 1984 },\n  { title: "To Kill a Mockingbird", year: 1962 },\n  { title: "Toy Story 3", year: 2010 },\n  { title: "Logan", year: 2017 },\n  { title: "Full Metal Jacket", year: 1987 },\n  { title: "Dangal", year: 2016 },\n  { title: "The Sting", year: 1973 },\n  { title: "2001: A Space Odyssey", year: 1968 },\n  { title: "Singin\' in the Rain", year: 1952 },\n  { title: "Toy Story", year: 1995 },\n  { title: "Bicycle Thieves", year: 1948 },\n  { title: "The Kid", year: 1921 },\n  { title: "Inglourious Basterds", year: 2009 },\n  { title: "Snatch", year: 2000 },\n  { title: "3 Idiots", year: 2009 },\n  { title: "Monty Python and the Holy Grail", year: 1975 }\n];\n

\n

Answer 1

您可以使用和属性对输入值使用受控方法。这使您可以随时控制输入值。当Material-UI 认为值应该改变时，它会调用，并且 Material-UI 传递“输入”、“重置”或“清除”的原因（请参阅props文档）。您想忽略“重置”更改。inputValueonInputChangeonInputChangeonInputChange

这是沙箱的修改版本：

export default function ControlledInputValue() {
  const classes = useStyles();
  const [inputValue, setInputValue] = React.useState("");

  return (
    <div className={classes.root}>
      <Autocomplete
        multiple
        id="tags-standard"
        options={top100Films}
        inputValue={inputValue}
        onInputChange={(event, value, reason) => {
          if ( event && event.type === 'blur' ) {
            setInputValue('');
          } else if ( reason !== 'reset' ) {
            setInputValue(value);
          }
        }}
        getOptionLabel={(option) => option.title}
        renderInput={(params) => (
          <TextField
            {...params}
            variant="standard"
            label="Multiple values"
            placeholder="Favorites"
          />
        )}
      />
    </div>
  );
}