在编辑表单中显示字段

Question

目前，如果我尝试将一个字段放入编辑表单中，该字段根本不会显示。控制台或终端中没有关于为什么它不会的错误。

示例：

<Edit undoable={false} {...props}>
  <SimpleForm>
    <FormRow>
      <TextField source="id"/>
      <TextField source="name"/>
    </FormRow>
  </SimpleForm>
</Edit>

不会在页面加载时显示其中任何一个，它只是空白。

有什么方法可以使用编辑表单中的字段吗？

Answer 1

您需要传入 record 道具（如果是引用，还需要传入 basePath）。

Edit 组件没有获取 record 属性，因此创建一个表单组件，它将作为 prop 传递记录

例如

const ProjectEdit: FC<EditComponentProps> = props => {
    const classes = useStyles();
    return (
        <RA.Edit {...props} title={<ProjectTitle />}>
            <RA.SimpleForm>
                <ProjectForm />
            </RA.SimpleForm>
        </RA.Edit>
    );
};



export const ProjectForm = (props: any) => {
    return (
        <Box flex={1} mr={{ md: 0, lg: '1em' }}>
            <RA.TextInput source="name" fullWidth={true} />

            <Typography variant="h6" gutterBottom>
                Tasks
            </Typography>

            <RA.TextField
                source="name"
                fullWidth={true}
                record={props.record}
            />
            <RA.ReferenceManyField
                label="Tasks"
                reference="Task"
                target="projectId"
                fullWidth={true}
                record={props.record}
                basePath="/Task"
            >
                <RA.SingleFieldList fullWidth={true}>
                    <RA.ChipField source="name" fullWidth={true} />
                </RA.SingleFieldList>
            </RA.ReferenceManyField>
        </Box>
    );
};

在编辑表单中显示字段

Display Field in Edit Form

react-admin