如果没有 field/column 名称，如何使用 react-admin 的 ChipField？

Question

我有一个这样的 CheckboxGroupInput 字段：

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

当用户同时选择两个选项时，它会为 fruits 字段生成 json：

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

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

源将是 "name" 如果 json 看起来像 fruits:[{'name':'apples'}, {'name':'pears'}]

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

如何使用 ChipField OR 显示纯字符串数组的内容我如何告诉 CheckboxGroupInput 生成对象数组而不是字符串数组？

Answer 1

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

Answer 2

这是一个很好的方法。我会提供一个替代选项，它不需要创建新组件并且在不同情况下可能会有优势。

FunctionField 组件对于需要在显示数据之前修改数据的这些类型的情况非常方便。

<ArrayField source="fruits">
  <SingleFieldList>
    <FunctionField render={(record) => (
      <ChipField record={{name: record }} source="name" />
    )} />
  </SingleFieldList>
</ArrayField>

ChipField 需要一个带有 property:value 的对象。然后您将源指定为属性。使用仅将记录作为单个值提供给您的 ArrayField，您可以使用 FunctionField 将该值转换为对象。然后将源设置为您使用的任何属性（在此示例中，我使用了通用的“名称”）

如果没有 field/column 名称，如何使用 react-admin 的 ChipField？

How to use react-admin's ChipField if there is no field/column name?

reactjs

material-ui

react-admin

react-final-form