[英]How to remove a selected Chip outside of Autocomplete in material UI
所以我想在<Autocomplete />
的<TextField />
<Chip />
> 。 我能夠將值顯示為state
。 但是,我仍然無法刪除這些芯片,即不僅顯示,而且還更改了<Autocomplete />
中的selected
道具。 有人有想法嗎?
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>
);
}
完整代碼在這里
你需要兩件事:
Chip
的onDelete
中的相應邏輯如: onDelete={() => {
setVal(val.filter(entry => entry !== option));
}}
Autocomplete
上指定值(您已經在狀態中管理): <Autocomplete
value={val}
// ... other properties
/>
這是您的沙盒的工作版本: https://codesandbox.io/s/autocomplete-with-chips-85rqq
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.