reactjs - 如果没有字段/列名称，如何使用 react-admin ChipField？

Question

我有一个 CheckboxGroupInput像这样的字段:

   <CheckboxGroupInput source="fruits" choices={[
        { 'name': 'apples' },
        { 'name': 'pears' }
    ]} optionValue='name'/>

为 fruits 生成这样的 json当用户选择两个选项时的字段:

  'fruits': ['apples','pears']

我想在 List 中显示它使用 ChipField这需要一个 source我没有，因为 json 是一个普通的字符串数组。

如果 json 看起来像 fruits:[{'name':'apples'}, {'name':'pears'}]，源将是“名称”

           <ArrayField source='fruits'>
                <SingleFieldList>
                    <ChipField source='???' />  
                </SingleFieldList>
            </ArrayField>

如何使用 ChipField 显示纯字符串数组的内容或者我怎么告诉 CheckboxGroupInput产生一个对象数组而不是一个字符串数组？

Answer 1

查看演示代码总是一个好主意。我设法创建了一个名为 SimpleChipField 的自定义组件。通过修改自定义 ChipField来自 react-admin 演示代码。它显示了整个 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>