gpt4 book ai didi

reactjs - 在 Material-UI 中将芯片/标签移到自动完成框之外

转载 作者:行者123 更新时间:2023-12-03 21:42:10 25 4
gpt4 key购买 nike

我正在使用 Material-UI Autocomplete 组件,并试图弄清楚是否可以将筹码/标签移到输入框之外。这甚至可能..?我更愿意将筹码列在盒子下方。这样,文本框可以单独用于用户输入,而不是同时显示筹码/标签和用户输入。
我曾尝试玩其中一个基本演示,但没有任何运气。我把它清除回默认状态,以防这里有一些用户有这方面的经验。示例的起点可以是以下沙箱
https://codesandbox.io/s/material-demo-forked-7vroo?file=/demo.js

最佳答案

您可以通过禁用 Autocomplete 中的标签呈现并在 Chip 下方添加您自己的 Autocomplete 列表来实现。

const [value, setValue] = useState([]);
const onDelete = (title) => () => {
setValue((value) => value.filter((v) => v.title !== title));
};

return (
<div>
<Autocomplete
multiple
options={top100Films}
getOptionLabel={(option) => option.title}
value={value}
onChange={(e, newValue) => setValue(newValue)}
renderTags={() => null} // don't render tag in the TextField
renderInput={(params) => (
<TextField {...params} variant="outlined" placeholder="Favorites" />
)}
/>
<div>
// manage and render your own tag list here instead
{value.map((v) => (
<Chip key={v.title} label={v.title} onDelete={onDelete(v.title)} />
))}
</div>
</div>
);
const top100Films = [
{ title: "The Shawshank Redemption", year: 1994 },
{ title: "The Godfather", year: 1972 },
]
现场演示
Edit 66881433/moving-the-chips-tags-out-of-the-autocomplete-box-in-material-ui

关于reactjs - 在 Material-UI 中将芯片/标签移到自动完成框之外,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/66881433/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com