diff --git a/README.md b/README.md index 90e933b..61d6ab0 100644 --- a/README.md +++ b/README.md @@ -71,21 +71,28 @@ import PlacesAutocomplete, { class LocationSearchInput extends React.Component { constructor(props) { super(props); - this.state = { address: '' }; + this.state = { address: '', showDropdown: false }; } handleChange = address => { - this.setState({ address }); + this.setState((prevState) => ({ ...prevState, address })); }; handleSelect = address => { + this.handleChange(address); + + // example usage geocodeByAddress(address) .then(results => getLatLng(results[0])) .then(latLng => console.log('Success', latLng)) .catch(error => console.error('Error', error)); + + // this.props.onSelect(address); }; render() { + const shouldShowDropdown = this.state.showDropdown && this.state.address; + return ( { + this.setState((s) => ({ ...s, showDropdown: true })); + }, + onBlur: () => { + this.setState((s) => ({ ...s, showDropdown: false })); + }, })} /> -
+
0 ? {} : { display: 'none' }), + }} + > {loading &&
Loading...
} + {suggestions.map(suggestion => { const className = suggestion.active ? 'suggestion-item--active' @@ -110,6 +129,7 @@ class LocationSearchInput extends React.Component { const style = suggestion.active ? { backgroundColor: '#fafafa', cursor: 'pointer' } : { backgroundColor: '#ffffff', cursor: 'pointer' }; + return (