截断材料UI的自动完成值(复制材料UI多重选择的截断renderValue)
截断材料UI的自动完成值(复制材料UI多重选择的截断renderValue)
提问于 2020-07-09 17:08:41
作为背景
使用Material Multiple Select，您可以截断选择后显示的值，而不是转到另一行(通过将renderValue设置为.join the selected options，它提供了“选项A，选项B，.”的功能)。这里最重要的一点是它增加了“.”如果所选选项太长，无法适应一行，而不是扩展到下一行。
例如，以下内容与Multiple Select一起工作
// Truncated value (I DO want this, for `Autocomplete`)
<Select
labelId="demo-mutiple-name-label"
id="demo-mutiple-name"
multiple
value={personName}
onChange={handleChange}
input={<Input />}
renderValue={selected => selected.join(", ")}
MenuProps={MenuProps}
>
{names.map(name => (
<MenuItem
key={name}
value={name}
style={getStyles(name, personName, theme)}
>
{name}
</MenuItem>
))}
</Select>
// – VERUS –
// chips that wrap to multiple lines (DON'T want this)
<Select
labelId="demo-mutiple-chip-label"
id="demo-mutiple-chip"
multiple
value={personName}
onChange={handleChange}
input={<Input id="select-multiple-chip" />}
renderValue={selected => (
<div className={classes.chips}>
{selected.map(value => (
<Chip key={value} label={value} className={classes.chip} />
))}
</div>
)}
MenuProps={MenuProps}
>
{names.map(name => (
<MenuItem
key={name}
value={name}
style={getStyles(name, personName, theme)}
>
{name}
</MenuItem>
))}
</Select>
我正在尝试用资料UI Autocomplete复制上面的功能
但似乎没有明显的方法来做到这一点。
我尝试过几种方法：
<Autocomplete
multiple
id="tags-standard"
options={top100Films}
getOptionLabel={option => option.title}
defaultValue={[top100Films[13]]}
renderTags={selected => {
console.log("selected = ", selected);
let renderTagsValue = selected
.map(function(elem) {
return elem.title;
})
.join(", ");
return (
<Typography noWrap={true} color="textPrimary">
{renderTagsValue}
</Typography>
);
}}
renderInput={params => (
<TextField
{...params}
variant="standard"
label="Multiple values"
placeholder="Favorites"
/>
)}
/>renderTags- Since renderValue不是Autocomplete的选项，我在renderTags中添加了一个.join，但这只会创建一个长字符串，该字符串将继续转到下一行。disableListWrap- I希望这样可以防止任何东西从包装到下一行，但它仍然包装到下一行。limitTags- This不能工作，因为标记可以是可变长度的。1、2或3可能适合于一行，这取决于所选择的标记。renderTags和Typography--与#1相同，加上返回一个noWrap设置为true的Typography元素(这是接近的，但仍然不正确)。
我最近的尝试是#4，但还是不对。它截断，但仍然包装占位符文本到下一行，使文本框的高度垂直展开，而不是保持固定(如演示与Multiple Select)。
有没有人知道如何用资料用户界面( Material Multiple Select)复制材料用户界面( Material Multiple Select)的截断renderValue。
Stack Overflow用户
发布于 2022-04-07 08:55:27
在css中使用这个。这不会扩展“自动完成”的高度。
.MuiAutocomplete-inputRoot {
flex-wrap: nowrap !important;
}
.Mui-focused {
flex-wrap: wrap !important;
}您也可以调整芯片的宽度。
.MuiAutocomplete-tag {
max-width: 100px !important;
}参考回答
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/62820103
复制相关文章
相似问题
腾讯云开发者
