javascript - react-places-autocomplete向下推其他组件

我一直在努力解决这个问题。使用最新的README.md githun repo中给出的相同示例来推动下面的其他组件，这不是更好的用户体验。我在下面包括一个简单的文本字段来演示这一点。还尝试将位置用作绝对值，但没有用。

react-places-autocomplete使用我用于地点建议的Google Maps 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;
}