Question

我正在尝试为我的项目开发一个管理面板。在该项目中，有一个名为Places的实体，它将存储有关商店和购物中心的数据。为了简化使用，我希望搜索字段可以在Google Maps上搜索并直接从Google Maps检索坐标。为此，有一个很小但功能强大的react组件，react-geosuggest 现在，我想在我的Easy Admin新建和编辑表单中使用此组件。但是我无法解决应该如何实现呢？

我试图向symfony添加一个自定义字段，但是它不起作用（documentation about this）。还尝试仅自定义外观，但这也不起作用。

Answer 1

至少我成功实现了此功能。这是我的方法。

首先，我在assets/js的{{1}}文件夹中添加了react-geosuggest代码

geosuggest.jsx

要从react组件获取位置和地址信息，我在import React from 'react'; import ReactDOM from 'react-dom'; import Geosuggest from 'react-geosuggest'; class App extends React.Component { /** * Render the example app */ render() { var fixtures = []; return ( <div> <Geosuggest ref={el=>this._geoSuggest=el} placeholder="Start typing!" fixtures={fixtures} onSuggestSelect={this.onSuggestSelect} location={new google.maps.LatLng(53.558572, 9.9278215)} radius="20" /> </div> ) } /** * When a suggest got selected * @param {Object} suggest The suggest */ onSuggestSelect(suggest) { document.getElementById('places_coordinates').value = suggest.location.lat + "," + suggest.location.lng; document.getElementById('places_address').value = suggest.gmaps.formatted_address; document.getElementById('geosuggest-help').innerHTML += ": "+ suggest.location.lat + "," + suggest.location.lng; console.log(suggest.location.lat + "," + suggest.location.lng); console.log(suggest.gmaps.formatted_address); console.log(suggest); } } ReactDOM.render(<App />, document.getElementById('google_map'));函数中添加了一些代码

onSuggestSelect

然后我将此文件添加到webpack-config.js文件

 document.getElementById('places_coordinates').value = suggest.location.lat + "," + suggest.location.lng;
      document.getElementById('places_address').value = suggest.gmaps.formatted_address;
      document.getElementById('geosuggest-help').innerHTML += ": "+ suggest.location.lat + "," + suggest.location.lng;

在easy_admin.yaml文件中，我声明了要添加地理建议功能的字段

.addEntry('react','./assets/js/geosuggest.jsx')

我还使用此代码为新实体html添加了模板

 - { property: 'coordinates', icon: 'user', label: 'Coordinates', help: null, type: 'text', type_options: { block_name: 'geosuggest' }  }

所以我在templates: new: 'admin/new-place.html.twig'文件夹中创建了new-place.html.twig文件。

templates/admin

此block_name是magic属性；有了这个属性，我能够自定义字段。因此，我在{# templates/new-place.html.twig #} {% extends '@EasyAdmin/default/new.html.twig' %} {% block body_javascript %} {{ parent() }} <script type="text/javascript" src="{{ asset('build/runtime.js') }}"></script> {% endblock %}中创建了一个名为templates/form folder的文件。这是此文件的来源

geosuggest.html.twig

通常，easyadmin会为坐标字段生成一个文本字段，但是反应代码会删除此输入字段，并用自己的文本框替换它。为了获得坐标数据并在保存时将其传递给easyadmin，我使用了一个隐藏字段。您可以看到上面的代码。

它奏效了。

可能不是最好的方法，但这是我发现使其起作用的唯一方法。希望对您有帮助。

EasyAdmin + Symfony 4的自定义字段

1 个答案: