0

如演示中所述，我正在使用mui-places-autocomplete 。

import React from 'react'
import SomeCoolComponent from 'some-cool-component'
import MUIPlacesAutocomplete, { geocodeByPlaceID } from 'mui-places-autocomplete'

class Example extends React.Component {
  constructor() {
    super()

    // Setup your state here...
    this.state = { coordinates: null }

    this.onSuggestionSelected = this.onSuggestionSelected.bind(this)
  }

  onSuggestionSelected(suggestion) {
    geocodeByPlaceID(suggestion.place_id).then((results) => {
      // Add your business logic here. In this case we simply set our state with the coordinates of
      // the selected suggestion...

      // Just use the first result in the list to get the geometry coordinates
      const { geometry } = results[0]

      const coordinates = {
        lat: geometry.location.lat(),
        lng: geometry.location.lng(),
      }

      this.setState({ coordinates })
    }).catch((err) => {
      // Handle any errors that occurred when we tried to get geospatial data for a selected
      // suggestion...
    })
  }

  render() {
    // Your render logic here...
  }
}

export default Example

这在用户选择建议时有效。但是当用户清除这个搜索框时，我们如何捕捉到这个事件呢？

在以前的类似库中，我正在使用类似的东西：handleChange但现在/与此库一起无法使用。

4

2 回答 2

1

自动建议组件在内部使用一个<TextField />组件。因此，您应该能够textFieldProps用于管理输入字段上的事件。

见源

于 2018-08-05T11:59:19.150 回答
0

使用@dkulkarni 的提示，我终于让它工作了。

import React, { Component } from 'react'
import GooglePlaceAutocomplete from 'mui-places-autocomplete'
import { geocodeByAddress } from 'react-places-autocomplete'
import FormControl from '@material-ui/core/FormControl'
import PropTypes from 'prop-types'

export const getCountryFromAddress = (address) => {
    if (!address) {
        return '';
    }
    try {
        const country = address.address_components.filter(component => component.types.includes('country')).map(c => c.long_name)[0];
        console.log('using country for filter ' + country);
        return country;
    } catch (error) {
        console.log(error);
        return '';
    }
}

class LocationFieldComponent extends Component {

    constructor(props) {
        super(props);
        const viewValue = this.props.value;
        this.state = {
            value: viewValue && viewValue.formatted_address
        };

        this.onSuggestionSelected = this.onSuggestionSelected.bind(this);
        this.onChange = this.onChange.bind(this);
    }

    onChange = (e) => {

        this.setState({
            value: e.target.value
        });

        if (e.target.value === '') {
            console.log('cleared');
            this.props.onSelectionChanged('');
        }
    }

    onSuggestionSelected = (suggestion) => {

        console.log('Selected suggestion:', suggestion)
        const address = suggestion.description;
        this.setState({
            value: address
        });

        geocodeByAddress(address)
            .then(address => {
                console.log('Selected ' + JSON.stringify(address[0]));
                this.props.onSelectionChanged(address[0]);
            })
            .catch(error => console.error('Error', error))
    }

    render = () => {

        const { customStyle } = this.props;

        return (
            <FormControl className={customStyle}>
                <GooglePlaceAutocomplete
                    name="location"
                    label="Location"
                    onSuggestionSelected={this.onSuggestionSelected}
                    textFieldProps={{ onChange: (e) => this.onChange(e), value: this.state.value, placeholder: 'Search for a place'}}
                    types={['(regions)']}
                    renderTarget={() => (<div />)}
                />
            </FormControl>
        );
    }
}

LocationFieldComponent.propTypes = {
    onSelectionChanged: PropTypes.func.isRequired,
  }

export default LocationFieldComponent;

然后我使用它，例如：

<LocationFieldComponent onSelectionChanged={this.handleLocationSelected} customStyle={classes.cell}/>
于 2018-08-06T22:07:24.577 回答