mui-places-autocomplete：如何訂閱明文字段事件？

Question

我正在使用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但現在/在此庫中不起作用。

Answer 1

自動建議組件在內部使用<TextField />組件。 因此，您應該能夠使用textFieldProps來管理輸入字段上的事件。

查看資料

Answer 2

最后，使用@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}/>