首页 > 解决方案 > 编辑表单中的显示字段

问题描述

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

例子:

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

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

有没有办法使用编辑表单中的字段?

标签: react-admin

解决方案


You need to pass in the record prop (and basePath if its a reference).

The Edit component does not get the record prop so create a form component and it will get passed the record as a prop

eg.

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>
    );
};

推荐阅读