reactjs - 如果没有字段/列名,如何使用 react-admin 的 ChipField?
问题描述
我有一个CheckboxGroupInput
这样的领域:
<CheckboxGroupInput source="fruits" choices={[
{ 'name': 'apples' },
{ 'name': 'pears' }
]} optionValue='name'/>
fruits
当用户选择两个选项时,它会为该字段生成 json like this :
'fruits': ['apples','pears']
我想在需要我没有的List
using中显示它,因为 json 是一个纯字符串数组。ChipField
source
如果 json 看起来像,源将是“名称”fruits:[{'name':'apples'}, {'name':'pears'}]
<ArrayField source='fruits'>
<SingleFieldList>
<ChipField source='???' />
</SingleFieldList>
</ArrayField>
如何使用ChipField
OR显示纯字符串数组的内容,如何告诉CheckboxGroupInput
生成对象数组而不是字符串数组?
解决方案
查看演示代码总是一个好主意。我设法通过从 react-admin 演示代码中SimpleChipField
修改自定义来创建一个自定义组件。ChipField
它将整个显示record
为标签。
import React from 'react';
import Chip from '@material-ui/core/Chip';
import { makeStyles } from '@material-ui/core';
const useStyles = makeStyles({
main: {
display: 'flex',
flexWrap: 'wrap',
marginTop: -8,
marginBottom: -8,
},
chip: { margin: 4 },
});
const SimpleChipField = ({ record }) => {
const classes = useStyles();
return record ? (
<span className={classes.main}>
<Chip
key={record}
className={classes.chip}
label={record}
/>
</span>
) : null;
};
SimpleChipField.defaultProps = {
addLabel: true,
};
export default SimpleChipField;
要使用它,只需将其代替常规的ChipField
.
<ArrayField source="fruits">
<SingleFieldList>
<SimpleChipField />
</SingleFieldList>
</ArrayField>
推荐阅读
- mysql - 如何在where条件下多次使用相同的列
- emacs - Emacs screen tearing with mouse scroll
- python - BeautifulSoup 中用于 XML 解析的正则表达式
- excel - VBA 如何改进此代码并使其更高效?
- wordpress - How to create variable page title for a set of custom taxonomy pages
- python-3.x - Python 3 中未关闭的打开文件有什么问题?
- spring - 添加到 application.properties 后,Maven 构建失败
- javascript - Push value into object
- java - 向 ConstraintViolation 添加更多属性
- google-app-engine - google app engine flexible - 如何使用客户端库或 REST API 启动现有版本