如何将 google 地址 lat lng 设置为输入值？

Question

如何将 google 地址 lat lng 设置为输入值？

我可以获得地址、纬度和经度任何我想要的信息。

但是如何设置我的输入值？

在我的 newPostPage.jsx 中，我使用此代码

const [selectedAddress,setSelectedAddress] = useState();
const [coordinates, setCoordinates] = useState();

<div className="item">
  <label htmlFor="address">Address</label>
  <GoogleAddressSearch
      selectedAddress={(value)=> setSelectedAddress(value)}
      setCoordinates={(value)=> setCoordinates(value)}
/>
</div>

GoogleAddressSearch.jsx 代码

<GooglePlacesAutocomplete apiKey=process.env.GoogleApiKey 
    selectProps={{
        placeholder: 'Search...',
        isClearable:true,
        className:'w-full',
        onChange:(place) => {
            console.log(place)
            selectedAddress(place)
            geocodeByAddress(place.label)
            .then(result=>getLatLng(result[0]))
            .then(({lat,lng}) => {
                setCoordinates({lat,lng})
            })
        }
    }}/>
    </div>

我可以获取信息

那么，我想将信息放入输入值中，该怎么办呢？我需要输入城市、纬度和经度，它也是禁用的。

我认为城市json字段是

secondary_text

<div className="item">
  <label htmlFor="city">City</label>
  <input id="city" name="city" type="text" disabled />
</div>
<div className="item">
  <label htmlFor="latitude">Latitude</label>
  <input id="latitude" name="latitude" type="text" disabled />
</div>
<div className="item">
  <label htmlFor="longitude">Longitude</label>
  <input id="longitude" name="longitude" type="text" disabled />
</div>

Answer 1

已修改

const [selectedAddress,setSelectedAddress] = useState();
const [coordinates, setCoordinates] = useState();

到

const [selectedAddress,setSelectedAddress] = useState('');
const [coordinates, setCoordinates] = useState('');

并添加

const [city, setCity] = useState('')

然后

<input id="city" name="city" type="text" disabled value={city} />
<input id="latitude" name="latitude" type="text" disabled value={coordinates.lat}  />
<input id="latitude" name="latitude" type="text" disabled value={coordinates.lng}  />

功能GoogleAddressSearch添加setCity

function GoogleAddressSearch({selectedAddress,setCoordinates,setCity})
.
.
.
setCity(place.value.structured_formatting.secondary_text)
..

决赛

<div className="item">
  <label htmlFor="address">Address</label>
  <GoogleAddressSearch
      selectedAddress={(value)=> setSelectedAddress(value)}
      setCoordinates={(value)=> setCoordinates(value)}
      setCity={(value)=>setCity(value)}
/>
</div>