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

Question

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

中使用对话框来做到这一点

 <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 创建自定义表单。查看记录最终答案的底部答案。

这可能对你有帮助

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

Answer 2

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

我使用 AOR 按钮创建了一个按钮并提供了一个容器元素

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 上单击编辑按钮时获取对话框

Getting a dialog on click of Edit Button on admin-on-rest

material-ui

admin-on-rest