javascript - React js material-ui 自动完成从renderInput中取出选中的元素并切换到textfield的InputProps
问题描述
我正在尝试使用新版本的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", 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
解决方案
我认为您可以尝试渲染标签:
renderTags={(tagValue, getTagProps) => {
return tagValue.map((option, index) => (
<MyChip {...getTagProps({ index })} label={option.title} />
));
}}
推荐阅读
- java - 两个 LocalDate 之间的月差
- arrays - Julia:如何在保持顺序的同时重塑数组?
- function - Scheme - 计算参数中原子出现次数的函数
- angular - 为什么我得到相同服务的两个不同实例?
- ansible - Ansible:查找(第一个)免费 IP 地址并设置它
- javascript - 如何在 HTML/Javascript 中进行受限时间输入?
- c# - 如何在 blazorise 中更改 BarMenu 字体颜色?
- firebase-realtime-database - Firebase 规则实时数据库
- angular - Angular8 - 测试一个从服务调用数组的函数
- django - 具有相同 URL 前缀的 Django REST Framework API 模式生成