admin-on-restの編集ボタンをクリックするとダイアログが表示される

Question

私はadmin-on-restフレームワークを使用しているアプリケーションで作業しています。 Resourceのエントリを編集するには、XXXEdit、XXXShow、XXXという小道具を作成します。私の要件は、任意のエントリのリストビューで編集ボタンをクリックすると、新しいページに行くのではなく、XXXEditのパラメータでダイアログボックスを取得する必要があるということです。私はDisabledInputを使用している場合は、私がThe TextInput component wasn't called within a redux-form のようなエラーが出

<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> 

が、私はcannot read value of undefined

は、どのように私はこれで行くかのエラーを取得XXXEditコンポーネントでダイアログを使用してこれをやってみましたか？

Answer 1

私はこれをHOCと反応ルータを使用して解決しようとしました。

私はAORのボタンを使用して、ボタンを作成し、私はDialogRoleEditは、以下のダイアログHOCで包まれたAOR編集コンポーネントであり、このようなルートを作成しcontainerElement

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

を提供します。

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

}

我々は

edit={DialogUserEdit} 

App.js

に、このリソースの編集小道具を提供する必要が

Answer 2

私はこのためにSimpleformを使用することはできません。 Redux-Formを使用してカスタムフォームを作成する必要があります。最終的な答えを文書化する下の答えを見てください。

これは、あなたの代わりにページを作成するの How to richly style AOR Edit page

を助けるかもしれません。 Redux状態に接続し、ダイアログボックスとして表示するコンポーネントを作成しています。