所以我想将选定的值显示为 <Chip />
在<TextField />
之外在 <Autocomplete />
.我能够将值显示为 state
.然而,我仍然无法删除这些芯片,即不仅是显示,而且还更改了 selected
Prop <Autocomplete />
.有人有想法吗?
const [val, setVal] = useState([]);
const valHtml = val.map((option, index) => (
<Chip
label={option.title}
deleteIcon={<RemoveIcon />}
onDelete={() => {}}
/>
));
return (
<div>
<Autocomplete
multiple
filterSelectedOptions
options={top100Films}
onChange={(e, newValue) => setVal(newValue)}
getOptionLabel={option => option.title}
renderTags={() => {}}
renderInput={params => (
<TextField
{...params}
variant="standard"
placeholder="Favorites"
margin="normal"
fullWidth
/>
)}
/>
<div className="selectedTags">{valHtml}</div>
</div>
);
}
完整代码here
最佳答案
你需要两件事:
Chip
的onDelete
中的适当逻辑,例如:
onDelete={() => {
setVal(val.filter(entry => entry !== option));
}}
- 在
Autocomplete
上指定值(您已经在状态中管理):
<Autocomplete
value={val}
// ... other properties
/>
这是您的沙箱的工作版本:https://codesandbox.io/s/autocomplete-with-chips-85rqq
关于javascript - 如何在 Material UI 中删除自动完成之外的选定芯片,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58924590/