使用这个库-https://tintef.github.io/react-google-places-autocomplete/docs/-我有-
<GooglePlacesAutocomplete
apiKey={'someKey'}
autocompletionRequest={{
componentRestrictions: {
country: ['uk']
}
}}
selectProps={{
value: address,
onChange: (o) => {
let placeId = o["value"]["place_id"];
setAddress(o);
formik.setFieldValue("googlePlaceId", placeId);
}
}}
/>
字符串
我需要传递什么作为“address”的值,才能有一个初始值?
我试过{label:“some address”,place_id:“ChIJNYiUp 8 ROeEgRikq 4 Ws 76 OpU”}并传递使用实用程序geocodeByPlaceId返回的对象。到目前为止,前者的工作原理是在初始化时在输入字段中显示标签,但它似乎已损坏。例如,当我尝试使用退格键删除值时,我的react应用程序崩溃,并在控制台中出现此错误-
Uncaught TypeError: Cannot read property 'place_id' of undefined
at Object.getOptionValue (index.es.js:30)
at cr (index.es.js:30)
at eval (index.es.js:30)
at Array.some (<anonymous>)
at lr (index.es.js:30)
at or (index.es.js:30)
at eval (index.es.js:30)
at Array.map (<anonymous>)
at rr (index.es.js:30)
at eval (index.es.js:30)
型
4条答案
按热度按时间dzjeubhm1#
这最好按照React-Select的文档来实现,就像创建者建议的那样。但是要实现你想做的事情,你需要React State。
字符串
我们使用useEffect来更新我们设置的默认值,条件是我们得到一个实际值。如果我们没有得到实际值,我们就不保存它。
ldfqzlk82#
令人烦恼的是,这个库的文档引用了一个库到另一个库的文档,react-select。
这是我的组件现在的样子-
字符串
所以在一个更高的分量里-
型
默认的初始值是这样设置的(使用formik)-
型
sgtfey8w3#
如果你只是想将地址设置为googlePlacesinput的文本。
你可以看看我是如何在这篇文章中做到这一点的。
https://stackoverflow.com/a/77081486/15315728
olqngx594#
我是这样解决的:
字符串
然后用它
型
isEditing和initialForm是从父组件到子组件设置的,基本上useEffect会查找ref和isEditing中的更改,如果isEditing为false,则存在initialForm.location值,并且仅与HTMLInputElement交互(参考当前)设置值并单击它(点击这里是绝对必要的,以正确触发MUI TextField的输入标签,以正确的行为).对不起,真的忙碌一天忙,我不能张贴一个很好的可复制的片段现在。