javascript - 只希望使用 react-places-autocomplete 建议的城市和相关国家
问题描述
在 react-places-autocomplete 的搜索字段中输入内容时,我只想获取建议中的城市和相关国家/地区。我尝试使用searchOptions道具并放在那里{{type: ['(cities)', '(country)']}}不起作用。为了使事情像这样工作,我应该在那里使用什么?有人遇到同样的问题吗?有什么帮助吗?
以下是我的代码:
import React, { Component } from 'react';
import { render } from 'react-dom';
import Hello from './Hello';
import './style.css';
import PlacesAutocomplete, { geocodeByAddress, geocodeByPlaceId, getLatLng } from 'react-places-autocomplete';
const isObject = val => {
return typeof val === 'object' && val !== null;
};
const classnames = (...args) => {
const classes = [];
args.forEach(arg => {
if (typeof arg === 'string') {
classes.push(arg);
} else if (isObject(arg)) {
Object.keys(arg).forEach(key => {
if (arg[key]) {
classes.push(key);
}
});
} else {
throw new Error(
'`classnames` only accepts string or object as arguments'
);
}
});
return classes.join(' ');
};
class App extends Component {
constructor() {
super();
this.state = {
name: "React",
postAddress: "",
post_address_obj: {},
errorMessage: "",
latitude: null,
longitude: null,
isGeocoding: false
};
}
handlePostAddressChange = address => {
// console.log(address);
this.setState({
postAddress: address,
latitude: null,
longitude: null,
errorMessage: ""
});
};
render() {
return (
<div>
<div
id="post_elements_5"
className="div-capsule-margin location_margin"
>
<PlacesAutocomplete
value={this.state.postAddress}
onChange={this.handlePostAddressChange}
>
{({ getInputProps, suggestions, getSuggestionItemProps }) => {
return (
<div className="Demo__search-bar-container">
<div className="Demo__search-input-container">
<input
{...getInputProps({
placeholder: "Tag the location",
className: "Demo__search-input"
})}
/>
{this.state.postAddress.length > 0 && (
<button
className="Demo__clear-button"
onClick={this.handleCloseClick}
>
x
</button>
)}
</div>
{suggestions.length > 0 && (
<div className="Demo__autocomplete-container">
{suggestions.map(suggestion => {
const className = classnames("Demo__suggestion-item", {
"Demo__suggestion-item--active": suggestion.active
});
return (
/* eslint-disable react/jsx-key */
<div
{...getSuggestionItemProps(suggestion, {
className
})}
>
<strong>
{suggestion.formattedSuggestion.mainText}
</strong>{" "}
<small>
{suggestion.formattedSuggestion.secondaryText}
</small>
</div>
);
/* eslint-enable react/jsx-key */
})}
<div className="Demo__dropdown-footer">
<div>
<img
src="http://files.hostgator.co.in/hostgator254362/image/powered-by-google.png"
className="Demo__dropdown-footer-image"
/>
</div>
</div>
</div>
)}
</div>
);
}}
</PlacesAutocomplete>
</div>
</div>
);
}
}
render(<App />, document.getElementById('root'));
解决方案
将searchOptions
用于AutocompletionRequest,它允许您指定types
响应的。
<PlacesAutocomplete
value={this.state.postAddress}
onChange={this.handlePostAddressChange}
searchOptions={{ types: ['locality', 'country'] }}
>
推荐阅读
- extjs - 将 UTC 日期转换为 DD-MM-YYYY 格式-EXTJS
- c# - 身份验证后的 C# 反向代理
- php - 选择特定单选按钮的值
- ruby-on-rails - Rails 5.2:使用非属性参数调用的危险查询方法(其参数用作原始 SQL 的方法)
- amazon-s3 - Amazon S3 对象到期
- c# - 当应用程序可以自托管或 IIS 时,如何将 NTLM 身份验证添加到 .net 核心
- mysql - 使用 Sequelize JS 插入唯一记录的更好方法
- sql - 如何在 SQL 中获取具有特定 ID 的随机帖子?
- tfs - TFS 2018 实例上出现多个 404 错误
- facebook - Facebook AR Studio - 导入动画