Question

我创建了一个对话框，其中包含“编辑表单”中的“创建表单”。当我点击＆＃34;新关系＆＃34;按钮，将显示对话框，但我不知道为什么编辑表单中的records也会被清除。

点击show对话前：

点击show对话框时：

点击show对话框后：

这是我的代码：

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操作，以支持“保存并创建新”方案。请打开一个问题，以便我们讨论这个问题。

讨论后编辑：

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

的工作

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

如果你想要像之前描述的那样进行版本/创建，你必须实现自己的反应组件，最终使用aor restClient来获取/更新数据。

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

1 个答案: