编辑表单中的显示字段

时间:2020-05-20 18:56:00

标签: react-admin

当前,如果我尝试将“字段”放入“编辑”表单中,则该字段根本不会显示。在控制台或终端中,不会出现任何错误的原因。

示例:

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

在页面加载时将不会显示任何一个,而只是空白。

有什么方法可以使用“编辑”表单中的字段?

1 个答案:

答案 0 :(得分:1)

您需要传递记录属性(如果引用,则传递basePath。)

“编辑”组件没有获取记录道具,因此创建一个表单组件,它将作为道具传递记录

例如

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