如何将google地址lat收件箱设置为输入值?

我可以获取地址、更新和删除任何我想获取的信息.

但如何设置我的输入值呢?

在我的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>

我可以获取信息

enter image description here

那么,我想把信息输入值,怎么办呢?我需要添加城市、纬度和纬度,而且它是禁用的.

我认为城市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>

推荐答案

改性

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>

Reactjs相关问答推荐

react-hook-form问题:为什么getValues不返回大多数当前值?

可选链和useState挂钩

根据另一个Select中的选定值更改Select中的值

下拉Tailwind CSS菜单与怪异beviour

面对动画警告:未指定`useNativeDriver`.这是必需的选项,并且必须在REACT本机中显式设置为`true`或`False`

Reaction中的数据加载不一致

如何使用Reaction Testing Library+Vitest正确更新单元测试中的输入?

React-React中是否完全支持基于类的组件?

使用VITE的Reaction应用程序的配置是否正确?

如何删除 bootstrap 手风琴上的边框

在React Router 6中,在路由渲染后更新路由数据

虽然通过了身份认证,但并没有导航到请求的页面

使用 React Router v6 监听来自不同组件的组件状态变化

需要在窗口调整大小时更新 React 组件

Material UI:使用 mui 手风琴时出现props 类型失败:isValidElement 不是函数

在 Formik 表单中访问子组件的值

react-markdown 不渲染 Markdown

如何解决在 react.js 中找不到模块错误

在 Remix 中使用 chartjs 和 react-chartjs-2 会出现错误react-chartjs-2未在您的 node_modules 中找到

将 Material UI 菜单渲染为