我正在尝试使用Autocomplete
的新版本,我想确保从下拉菜单中选择一个元素时,我想修改文本字段的输入输入,以便以便将带有所选文本的芯片放入其中。
是否有办法知道autocomplete
renderInput
中的选定项目?
然后将此信息传递到文本字段的InputProps
。
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",{ 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",{ 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",{ title: "Seven Samurai",year: 1954 },{ title: "Star Wars: Episode IV - A New Hope",year: 1977 },{ title: "City of God",{ 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",{ title: "Léon: The Professional",{ title: "Spirited Away",{ title: "Saving Private Ryan",year: 1998 },{ title: "Once Upon a Time in the West",year: 1968 },{ title: "American History X",{ title: "Interstellar",year: 2014 }
];
我希望我最终可以做的事情是这样的: react-textinput-chip