我已经为这个问题苦苦挣扎了一段时间。使用最新 README.md githun repo 中给出的相同示例正在插入下面的其他组件,这并不是更好的用户体验。我在下面添加了一个简单的文本字段来演示这一点。还尝试使用绝对位置,但没有成功。
react-places-autocomplete
使用谷歌地图 javascript API,我将其用于地点建议
带有地点建议的图像按下下面的文本字段
这是我的代码
import React from 'react';
import PlacesAutocomplete, {
geocodeByAddress,
getLatLng,
} from 'react-places-autocomplete';
import TextField from '@material-ui/core/TextField';
import Autocomplete from '@material-ui/lab/Autocomplete';
class LocationSearchInput extends React.Component {
constructor(props) {
super(props);
this.state = { address: '' };
}
handleChange = address => {
this.setState({ address });
};
handleSelect = address => {
geocodeByAddress(address)
.then(response => response)
.then(response => {
})
.catch(error => console.error('Error', error));
this.setState({ address });
};
render() {
return (
<div>
<div>
<PlacesAutocomplete
value={this.state.address}
onChange={this.handleChange}
onSelect={this.handleSelect}
>
{({ getInputProps, suggestions, getSuggestionItemProps, loading }) => (
<div>
<input
{...getInputProps({
placeholder: 'Search Places ...',
className: 'location-search-input',
})}
/>
<div className="autocomplete-dropdown-container">
{loading && <div>Loading...</div>}
{suggestions.map(suggestion => {
const className = suggestion.active
? 'suggestion-item--active'
: 'suggestion-item';
// inline style for demonstration purpose
const style = suggestion.active
? { backgroundColor: '#fafafa', cursor: 'pointer' }
: { backgroundColor: '#ffffff', cursor: 'pointer' };
return (
<div
{...getSuggestionItemProps(suggestion, {
className,
style,
})}
>
<span>{suggestion.description}</span>
</div>
);
})}
</div>
</div>
)}
</PlacesAutocomplete>
</div>
<TextField
id="outlined-basic"
label="Outlined"
margin="normal"
variant="outlined"
/>
</div>
);
}
}
export default LocationSearchInput;
这是我的 App.js
import React from 'react';
import logo from './logo.svg';
import './App.css';
import LocationSearchInput from './components/Placepicker/index';
function App() {
return (
<LocationSearchInput/>
);
}
export default App;
最佳答案
您需要为自动完成容器提供绝对和 z-index 样式
添加此 CSS -
.autocomplete-dropdown-container{
position: "absolute";
z-index: 1000;
}
编辑:我使用的 css 有效 -
.location-search-input,
.location-search-input:focus,
.location-search-input:active {
box-shadow: 0 2px 2px 0 rgba(0,0,0,0.16), 0 0 0 1px rgba(0,0,0,0.08);
border: honeydew;
display: block;
width: 100%;
padding: 16px;
font-size: 16px;
border-radius: 2px;
outline: none;
}
.autocomplete-dropdown-container {
border-bottom: honeydew;
border-left: honeydew;
border-right: honeydew;
border-top: 1px solid #e6e6e6;
box-shadow: 0 2px 4px rgba(0,0,0,0.2);
position: absolute;
z-index: 1000;
border-radius: 0 0 2px 2px;
}
关于javascript - React-places-autocomplete 按下下面的其他组件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58980475/