React-admin：如何在 Edit/Create 视图中嵌入传单，用于视觉地址验证

Question

我有个人和地址列表。

在 React-admin Edit/Create 视图中，用户可能想要输入 address/city/postalcode，并希望查看该位置的 openstreetmap。

如何在 Edit/Crete 视图中嵌入 Leaflet openstreetmap，并 link 它带有地址字段？是否有 sample/blog/github 显示示例？

export const PersonEdit = props => (
    <Edit title={<PersonTitle />} {...props}>
        <SimpleForm>
            <TextInput disabled source="id" />
            <TextInput source="firstName" />
            <TextInput source="lastName" />
            <TextInput source="email" />
            <TextInput source="phone1" />
            <TextInput source="phone2" />
            <TextField label="Num" source="address.streetNum" />
            <TextField label="Street" source="address.streetName" />
            <TextField label="Pcode" source="address.postalCode" />
            <XrefAccountsField label="Xref Tags" source="xrefs" />
            <DateTimeInput disabled source="createTime" />
            <DateTimeInput disabled source="updateTime" />

            <MapContainer  center={[51.505, -0.09]} zoom={13} scrollWheelZoom={false}>
               <TileLayer url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" />
               <Marker position={[51.505, -0.09]}>
                 <Popup>
                   A pretty CSS3 popup. <br /> Easily customizable.
                 </Popup>
               </Marker>
             </MapContainer>

        </SimpleForm>

    </Edit>
);

Answer 1

您可以使用 <FormWithRedirect /> 组件 [check here] 通过自定义表单布局更轻松地定位它。通过这种方式，您还可以将其余输入分布在几行而不是一列中。

Answer 2

添加到index.css

.leaflet-container { height: 450px; width: 100%; margin: 0  }

将参数 fullWidth 添加到 MapContainer


export const PersonEdit = props => (
   ...

            <MapContainer  center={[51.505, -0.09]} zoom={13} scrollWheelZoom={false} fullWidth>
               <TileLayer url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" />
               <Marker position={[51.505, -0.09]}>
                 <Popup>
                   A pretty CSS3 popup. <br /> Easily customizable.
                 </Popup>
               </Marker>
             </MapContainer>

        </SimpleForm>
    </Edit>
);

React-admin：如何在 Edit/Create 视图中嵌入传单，用于视觉地址验证

React-admin: How to embed leaflet in Edit/Create view, for visual address validation

leaflet

react-leaflet

react-admin