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 상태에 연결하고 대화 상자로 표시하는 구성 요소를 작성 중입니다.