Question

我正在使用admin-on-rest框架开发应用程序。要编辑Resource上的条目，我们提供XXXEdit，XXXShow，XXXCreate道具。我的要求是，当我在任何条目的List视图中单击Edit按钮时，我应该得到一个带有XXXEdit参数的对话框，而不是转到新页面。我尝试使用XXXEdit组件中的Dialog

来做到这一点

 <Edit title={<RoleTitle />} {...props}>
      <SimpleForm>
        <Dialog
          title="Dialog With Actions"
          actions={actions}
          modal={false}
          open={true}
        >
          <TextInput source="id" />
          <TextInput source="name" validate={required} />
          .
          .//some more fields
        </Dialog>
      </SimpleForm>
    </Edit>

我收到The TextInput component wasn't called within a redux-form之类的错误如果我使用DisabledInput，则会收到错误cannot read value of undefined

我如何继续这个？

Answer 1

我认为你不能使用Simpleform。您需要使用Redux-Form创建自定义表单。看看记录最终答案的底部答案。

这可能会对你有所帮助 How to richly style AOR Edit page

而不是创建页面。您正在创建连接到Redux状态的组件并显示为对话框。

Answer 2

我尝试使用HOC和react-router来解决这个问题。

我使用AOR按钮创建了一个按钮，并提供了一个containerElement

containerElement={
          <Link
            key={record.id}
            to={{
              ...{
                pathname: `${basePath}/${encodeURIComponent(record.id)}`
              },
              ...{ state: { modal: true } }
            }}
          />
        }

我创建了一条这样的路线，DialogRoleEdit是一个AOR编辑组件，下面是对话框HOC。

<Route
    exact
    path="/roles/:id"
    render={routeProps => {
      return !!(
        routeProps.location.state && routeProps.location.state.modal
      ) ? (
        <Restricted authClient={authClient} location={routeProps.location}>
          <div>
            <RoleList resource={"roles"} {...routeProps} />
            <DialogRoleEdit resource={"roles"} {...routeProps} />
          </div>
        </Restricted>
      ) : (
        <Restricted authClient={authClient} location={routeProps.location}>
          <RoleEdit resource={"roles"} {...routeProps} />
        </Restricted>
      );
    }}
  />

最后一个HOC

handleClose = () => {
  this.props.history.goBack();
};
render() {
  const actions = [
    <FlatButton label="Cancel" primary={true} onClick={this.handleClose} />
  ];
  return (
    <Dialog>
      <WrappedComponent/>
    </Dialog>
  )

}

我们需要在App.js

中为此资源提供编辑道具

edit={DialogUserEdit}

在admin-on-rest上单击“编辑”按钮获取对话框

2 个答案: