reactjs - Material-UI 自动完成渲染值
问题描述
我有一个 ReactJs 应用程序,它使用具有多个值和复选框的 Material-UI 自动完成组件,完全像他们的代码片段:
<Autocomplete
multiple
id="checkboxes-tags-demo"
options={top100Films}
disableCloseOnSelect
getOptionLabel={(option) => option.title}
renderOption={(option, { selected }) => (
<React.Fragment>
<Checkbox
icon={icon}
checkedIcon={checkedIcon}
style={{ marginRight: 8 }}
checked={selected}
/>
{option.title}
</React.Fragment>
)}
style={{ width: 500 }}
renderInput={(params) => (
<TextField {...params} variant="outlined" label="Checkboxes" placeholder="Favorites" />
)}
/>
如何更改props
渲染的值将显示为“ Value A, Value B, "Value C
”,它们之间有逗号并且没有其他样式?
感谢您的时间
解决方案
提供自动完成RenderTags
道具:
签名:
function(value: T[], getTagProps: function) => ReactNode
value:提供给组件的值。
getTagProps:一个标签道具获取器。
在你的情况下:
renderTags={(values) =>
values
.map(value => value.title)
.join(', ')
}
推荐阅读
- angular - 类型 'never' 必须有一个返回迭代器的 '[Symbol.iterator]()' 方法
- excel - 通过联合范围循环
- batch-file - DOSBox 中的当前目录 [可选:使用 TURBO C]
- python - 在 pandas 中分析来自多个 .txt 文件的数据
- vba - MS Access VBA - MouseMove 离开对象时如何执行事件
- python - 选择列中具有特定值的行,并在 pandas 数据框中包含具有 NaN 的行
- java - for循环中的Java特定字符
- google-apps-script - Google Apps 脚本:响应预先存在的电子邮件线程
- docker - 根据环境在 Dockerfiles 中调用不同的命令
- git - 可以从即将删除的分支中剪切一个 git 分支吗?