React admin：如何在创建组件中显示一些数据，从单击创建按钮的页面答案

【问题标题】：React admin: how to show some data in create component, from the page where create button was clickedReact admin：如何在创建组件中显示一些数据，从单击创建按钮的页面
【发布时间】：2022-12-10 13:13:20
【问题描述】：

React admin：如何在单击创建按钮的页面中显示创建的一些数据。

我有一个客户端创建组件：

export const ClientCreate = (props) => (
    <Create {...props}>
      <SimpleForm>
        <ReferenceInput label="Realm" source="realm_id" reference="realms">
          <SelectInput optionText="id"/>
        </ReferenceInput>
<TextInput fullWidth="true" source="client_name" label="Client name"/>

此处此创建组件显示要选择的领域列表，但我想显示触发此客户端创建的单个领域。

我如何从触发创建视图的视图中传递 relm_id

<TopToolbar>
      <CreateButton basePath="/clients"/>
</TopToolbar>

这是我的 App 看起来像 const App = () => (

    <Admin dataProvider={dataProvider} layout={AppLayout}>
        <Resource name="realms" list={RealmsList} show={RealmShow} edit={RealmEdit} create={RealmCreate}/>
        <Resource name="clients" edit={ClientEdit} create={ClientCreate}/>
    </Admin>
);:

【问题讨论】：

标签： javascript reactjs react-admin

【解决方案1】：

您不能使用原始的 CreateButton，但您可以基于
createButton 并通过“状态”属性传递数据：

MyCreateButton.tsx:
...
<StyledFab
    component={Link}
    to={createPath({ resource, type: 'create' })}
    state={scrollStates[String(scrollToTop)]} // {scrollStates[String(scrollToTop)], relm_id: XXX}
...
<Button
    component={Link}
    to={createPath({ resource, type: 'create' })}
    state={scrollStates[String(scrollToTop)]} // {scrollStates[String(scrollToTop)], relm_id: XXX}


Clients.tsx:
...
export const ClientCreate = (props) => {                    
  const locate = useLocation()
  const cardId = locate.state?.relm_id

  console.log('ClientCreate, location:', locate) 
->
ClientCreate, location: 
{
  pathname: '/clients/create',
  search: '',
  hash: '',
  state: {
    _scrollToTop: true, 
    relm_id: XXX  
  },
  key: 's8x48fn3'
}

另一种选择是通过将数据添加到“to”属性来通过 URL 传递数据。

【讨论】：