reactjs 有没有办法设置React Google Places AutoComplete的初始值?

5vf7fwbs  于 12个月前  发布在  React
关注(0)|答案(4)|浏览(117)

使用这个库-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)

dzjeubhm

dzjeubhm1#

这最好按照React-Select的文档来实现,就像创建者建议的那样。但是要实现你想做的事情,你需要React State。

import { useState, useEffect } from "react";
import GooglePlacesAutocomplete from "react-google-places-autocomplete";

const Places = () => {
  const [data, setData] = useState("");
  //our default data

  useEffect(() => {
    data === "" ? setData("") : setData(data.label);
  }, [data]);
  // updating our default data

  return (
    <GooglePlacesAutocomplete
      apiKey={process.env.REACT_APP_MAP_API_KEY}
      autocompletionRequest={{
        componentRestrictions: {
          country: ["ng"], //to set the specific country
        },
      }}
      selectProps={{
        defaultInputValue: data, //set default value
        onChange: setData, //save the value gotten from google
        placeholder: "Start Destination",
        styles: {
          input: (provided) => ({
            ...provided,
            color: "#222222",
          }),
          option: (provided) => ({
            ...provided,
            color: "#222222",
          }),
          singleValue: (provided) => ({
            ...provided,
            color: "#222222",
          }),
        },
      }}
      onLoadFailed={(error) => {
        console.log(error);
      }}
    />
  );
};

export default Places;

字符串
我们使用useEffect来更新我们设置的默认值,条件是我们得到一个实际值。如果我们没有得到实际值,我们就不保存它。

ldfqzlk8

ldfqzlk82#

令人烦恼的是,这个库的文档引用了一个库到另一个库的文档,react-select。
这是我的组件现在的样子-

<GooglePlacesAutocomplete
                                apiKey={''}
                                autocompletionRequest={{
                                    componentRestrictions: {
                                        country: ['uk']
                                    }
                                }}
                                selectProps={{
                                    defaultInputValue: formik.status["addressLabel"],
                                    isClearable: true,
                                    value: address,
                                    onChange: (o) => {
                                        let placeId = "";
                                        if(o){
                                            placeId = o["value"]["place_id"];
                                        }
                                        setAddress(o);
                                        formik.setFieldValue("googlePlaceId",placeId);
                                    }
                                }}
                            />

字符串
所以在一个更高的分量里-

const [address, setAddress] = useState();


默认的初始值是这样设置的(使用formik)-

<Formik
                                initialValues={initialValues}
                                validationSchema={validationSchema}
                                // validationSchema={{}}
                                onSubmit={(values, actions) => {
                                    actions.setSubmitting(false);
                                    submitHandler(values, actions)
                                }}
                                initialStatus={{
                                    addressLabel: addressLabel
                                }}
                            >
                                {
                                    formik => {
                                        return (
                                            <Form formik={formik} {...formProps} />
                                        )
                                    }
                                }
                            </Formik>

sgtfey8w

sgtfey8w3#

如果你只是想将地址设置为googlePlacesinput的文本。
你可以看看我是如何在这篇文章中做到这一点的。
https://stackoverflow.com/a/77081486/15315728

olqngx59

olqngx594#

我是这样解决的:

import { usePlacesWidget } from 'react-google-autocomplete'

import TextField from '@mui/material/TextField';


const { ref, autocompleteRef } = usePlacesWidget({
    apiKey: googleApiKey,
    options: {
      types: ['address']
    },
    onPlaceSelected: (place) => {
      console.log(place)
      const latitude = place.geometry.location.lat();
      const longitude = place.geometry.location.lng();
      
      console.log(latitude, longitude)
      setFormState(prevState => ({
        ...prevState,
        location: place.formatted_address || "",
        lat: latitude,
        lng: longitude
      }));
    }
  });

  useEffect(()=> {
    if (!isEditing && ref.current !=null)
    {
      const inputElement = ref.current as HTMLInputElement;
      if (initialForm?.location)
      {
        inputElement.value = initialForm?.location
        inputElement.click()
      }
    }
  }, [isEditing, ref])

字符串
然后用它

<TextField 
 label="Location"
 inputRef={ref}
 disabled={!isEditing}
 >
</TextField>


isEditing和initialForm是从父组件到子组件设置的,基本上useEffect会查找ref和isEditing中的更改,如果isEditing为false,则存在initialForm.location值,并且仅与HTMLInputElement交互(参考当前)设置值并单击它(点击这里是绝对必要的,以正确触发MUI TextField的输入标签,以正确的行为).对不起,真的忙碌一天忙,我不能张贴一个很好的可复制的片段现在。

相关问题