react-places-autocomplete 下推下面的其他组件

Question

我已经为这个问题苦苦挣扎了一段时间。使用最新 README.md githun repo 中给出的相同示例正在推动下面的其他组件，这并不是更好的用户体验。我在下面包含了一个简单的文本字段来演示这一点。也尝试使用绝对位置，但没有用。

react-places-autocomplete 使用 google 地图 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;

Answer 1

您可以尝试绝对定位 - 像这样：

styles={{
  listView:{
    position: 'absolute',
    backgroundColor: '#FFF',
    zIndex: 10,//Forcing it to front
  }
}}

Answer 2

您需要为自动完成容器提供绝对样式和 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;
}

Answer 3

您需要设置绝对位置和zIndex

className="autocomplete-dropdown-container"
 styles={{
   listView:{
    position: 'absolute',
    backgroundColor: 'white',
    zIndex: 2,
   }
 }}>

react-places-autocomplete 下推下面的其他组件

react-places-autocomplete pushing down the other components below

javascript

autosuggest

reactjs

dropdown