我正在使用MUIAutocomplete组件并试图弄清楚是否可以移动芯片/标签outside输入框的。这可能吗？我更希望芯片列在盒子下方。这样，文本框就可以仅用于用户输入，而不是both显示芯片/标签和用户输入。
我尝试过使用其中一个基本演示，但没有任何运气。我将其清除回默认状态，以防这里有一些用户有这方面的经验。示例的起点可以是以下沙箱
https://codesandbox.io/s/material-demo-forked-7vroo?file=/demo.js 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 (
<Box sx={{ width: 500 }}>
<Autocomplete
multiple
options={top100Films}
defaultValue={[top100Films[13]]}
getOptionLabel={(option) => option.title}
value={value}
onChange={(e, newValue) => setValue(newValue)}
renderTags={() => null}
renderInput={(params) => (
<TextField {...params} variant="outlined" placeholder="Favorites" />
)}
/>
<Box
mt={3}
sx={{
'& > :not(:last-child)': { marginRight: 1 },
'& > *': { marginBottom: 1 },
}}
>
{value.map((v) => (
<Chip key={v.title} label={v.title} onDelete={onDelete(v.title)} />
))}
</Box>
</Box>
);
const top100Films = [
{ title: "The Shawshank Redemption", year: 1994 },
{ title: "The Godfather", year: 1972 },
]
现场演示
V5
V4
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
