自动清除编辑页面中的数据

Question

我创建了一个对话框，其中包含一个编辑表单中的创建表单。当我点击 "New relationship" 按钮时，会显示对话框，但我不知道为什么编辑表单中的 records 也被清除了。

点击显示对话框前：

点击显示对话框时：

点击显示对话框后：

这是我的代码：

export class CaregiverEdit extends React.Component {
constructor(props) {
    super(props);
    this.state = {
        open: false,
    };
}

handleOpen = () => {
    this.setState({open: true});
};

handleClose = () => {
    this.setState({open: false});
};

render() {
    const style = {
        margin: 12,
    };
    const actions = [
        <FlatButton
            label="Ok"
            onClick={ this.handleClose }
        />,
    ];
    var id = this.props.location.pathname.split('/')[2];
    const propsCreate = Object.assign({}, this.props, { authParams : {resource : "rela", route : "create"},
        location : {pathname : "/rela/create"}, match : { path : "/rela/create", url : "/rela/create"}, resource : "rela" });
    return (
        <div>
            <Edit title={<CaregiverTitle />} {...this.props}>
                <SimpleForm>
                    <DisabledInput source="id"/>
                    <ImageField source="profile_photo" />
                    <TextInput source="profile_photo" />
                    <TextInput source="name" />
                    <TextInput source="email" validate={email}/>
                    <TextInput source="phone" />
                    <BooleanInput source="status" label="Active"/>
                    <CardTitle title="* Relationship" titleStyle={{'fontSize':'18px'}}/>
                    <RaisedButton label="New relationship" onClick={this.handleOpen} style={style}/>
                    <GridField uid={id} {...this.props} />
                    <Dialog
                        title="New relationship"
                        actions={actions}
                        modal={false}
                        open={this.state.open}
                        onRequestClose={this.handleClose}
                        autoScrollBodyContent={true}>
                        <div>
                            <br/>
                            <Create {...propsCreate} title=" " actions="">
                                <SimpleForm  redirect={"/caregiver/" + id}>
                                    {/*<ReferenceArrayInput>*/}
                                    <DisabledInput source="user" defaultValue={id} label="Caregiver ID"/>
                                    <ReferenceInput label="Centre" source="centre" reference="centre" sort={{ field: 'name', order: 'ASC' }} allowEmpty>
                                        <SelectInput optionText="name" />
                                    </ReferenceInput>
                                    <DependentInput dependsOn="centre">
                                        <SubGenreInput source="current_group" optionText="label" optionValue="id" type="classgroup"/>
                                    </DependentInput>
                                    <DependentInput dependsOn="current_group">
                                        <SubGenreInput source="student_id" optionText="fullname" optionValue="id" type="student"/>
                                    </DependentInput>
                                    {/*</ReferenceArrayInput>*/}
                                    <RadioButtonGroupInput source="account_type"  defaultValue={10} choices={[
                                        { id: 10, name: 'Caregiver' },
                                        { id: 20, name: 'Guardian' },
                                    ]} optionText="name" optionValue="id" />
                                    <TextInput source="relationship" label="Relationship"/>
                                </SimpleForm>
                            </Create>
                        </div>
                    </Dialog>
                </SimpleForm>
            </Edit>
        </div>
    )
}

Answer 1

那是因为 aor 中的所有形式都具有相同的名称：record-form。我认为在创建操作之后，我们为表单发送一个 reset 操作以支持 "save and create new" 场景。请打开一个问题，以便我们讨论这个问题。

讨论后编辑：

最快的解决方案是为 CareGiver 使用一个版本视图，为 Relationship 使用另一个版本视图。您提到了与中间 table 的 n 对 n 关系。这种复杂性应该对客户隐藏。那是你的 API 或你的 restClient.

的工作

从 vue 的客户端角度来看，您将有 2 个实体使用 ReferenceArrayInput 来维护它们之间的引用。

如果你确实想要 edition/creation 像你之前描述的那样，你将不得不实现你自己的 React 组件，最终使用 aor restClient 到 fetch/update 数据。

自动清除编辑页面中的数据

Auto clear data in Edit Page

admin-on-rest