Question

我正在创建一个react组件，其中包含一个使用场所的表单，以帮助用户更轻松地填写地址。它工作得很好但是我想知道是否有办法阻止地方输入显示整个地址，因为我想将它用作地址字段（如果可能的话只有街道地址）

现在我只是在用户搜索并在最初选择它之后隐藏它，但是当用户想要返回并更改字段或我需要管理的任何内容时将其设置回到places字段（再次显示在地址栏的位置）和所有状态和焦点/点击/键向下（这是可能的，但我想知道是否有一个更简单的方法）。

所以 - 我可以解决这个问题，如果谷歌的地方输入只是在我选择一个时没有显示整个地址。也许有一种方法来拦截地方细节结果，我无法通过阅读API文档来讲述。这是我到目前为止的实现：

import React from 'react';
import ShippingAddress from './shippingAddress.jsx';

import _ from 'lodash';

function reducePlaces(memo, item) {
  return {
    ...memo,
    [item.types[0]]: {
      long_name: item.long_name,
      short_name: item.short_name
    }
  };
}

export default class MyCheckoutShipping extends React.Component {
  constructor(props) {
    super(props);

    this.geolocate = this.geolocate.bind(this);
    this.initAutocomplete = this.initAutocomplete.bind(this);
    this.fillInAddress = this.fillInAddress.bind(this);
  }

  componentDidMount() {
    this.initAutocomplete();
  }

  initAutocomplete() {
    // eslint-disable-next-line no-undef
    const autocomplete = new google.maps.places.Autocomplete((this.refs.autoCompletePlaces), {types: ['geocode']});

    autocomplete.addListener('place_changed', this.fillInAddress);
    this.setState({ autocomplete });
  }

  fillInAddress() {
    const place = this.state.autocomplete.getPlace();
    const addressObj = _.reduce(place.address_components, reducePlaces, { street_address: place.name });

    this.props.updateShippingAddress(addressObj);
  }

  geolocate() {
    if (navigator.geolocation) {
      navigator.geolocation.getCurrentPosition(function(position) {
        const geolocation = {
          lat: position.coords.latitude,
          lng: position.coords.longitude
        };

        // eslint-disable-next-line no-undef
        const circle = new google.maps.Circle({
          center: geolocation,
          radius: position.coords.accuracy
        });
        this.state.autocomplete.setBounds(circle.getBounds());
      });
    }
  }

  render() {
    let autoCompleteStyle;

    if (this.props.user.checkout.shipping.address) {
      autoCompleteStyle = { 'display': 'none'};
    }
    return (
  <div className="col-xs-12 My-checkout-shipping">
    <div className="col-sm-12 col-md-8 shipping-information">

      <form>

          <div className="form-group" style={autoCompleteStyle}>
            <input
              type="text"
              className="form-control"
              placeholder="Street Address"
              onFocus={this.geolocate}
              ref="autoCompletePlaces"
              />
          </div>

          <ShippingAddress address={this.props.user.checkout.shipping.address} />


      </form>

    </div>
  </div>
  );
}
}

MyCheckoutShipping.displayName = 'MyCheckoutShipping';

MyCheckoutShipping.propTypes = {
  user: React.PropTypes.object,
  updateShippingAddress: React.PropTypes.func
};

所以它只是在组件装载上，我的google api脚本和我的index.html上的键 - 这一切都很好。有没有人知道如何让地方字段只放置街道地址而不是完整的地址所以我不必微观管理所有用户状态？谢谢你的阅读！

Google将自动填充功能置于反应中，不会在输入的地方显示完整地址

0 个答案: