代码之家  ›  专栏  ›  技术社区  ›  Subhojit

只希望城市和相关国家在建议中使用React Places自动完成

  •  2
  • Subhojit  · 技术社区  · 6 年前

    我只想得到城市和相关国家的建议,同时输入到搜索领域的反应地方自动完成。我试过了 搜索选项 道具放在那里 {{类型:['(城市)',(国家)]} 但没用。为了让它像这样工作我应该在上面用什么? 有人面临同样的问题吗? 有什么帮助吗?

    以下是我的代码:

    import React, { Component } from 'react';
    import { render } from 'react-dom';
    import Hello from './Hello';
    import './style.css';
    import PlacesAutocomplete, { geocodeByAddress, geocodeByPlaceId, getLatLng } from 'react-places-autocomplete';
    
    const isObject = val => {
      return typeof val === 'object' && val !== null;
    };
    
    const classnames = (...args) => {
      const classes = [];
      args.forEach(arg => {
        if (typeof arg === 'string') {
          classes.push(arg);
        } else if (isObject(arg)) {
          Object.keys(arg).forEach(key => {
            if (arg[key]) {
              classes.push(key);
            }
          });
        } else {
          throw new Error(
            '`classnames` only accepts string or object as arguments'
          );
        }
      });
    
      return classes.join(' ');
    };
    
    class App extends Component {
      constructor() {
        super();
        this.state = {
          name: "React",
          postAddress: "",
          post_address_obj: {},
          errorMessage: "",
          latitude: null,
          longitude: null,
          isGeocoding: false
        };
      }
    
      handlePostAddressChange = address => {
        // console.log(address);
        this.setState({
          postAddress: address,
          latitude: null,
          longitude: null,
          errorMessage: ""
        });
      };
    
      render() {
        return (
          <div>
            <div
              id="post_elements_5"
              className="div-capsule-margin location_margin"
            >
              <PlacesAutocomplete
                value={this.state.postAddress}
                onChange={this.handlePostAddressChange}
              >
                {({ getInputProps, suggestions, getSuggestionItemProps }) => {
                  return (
                    <div className="Demo__search-bar-container">
                      <div className="Demo__search-input-container">
                        <input
                          {...getInputProps({
                            placeholder: "Tag the location",
                            className: "Demo__search-input"
                          })}
                        />
                        {this.state.postAddress.length > 0 && (
                          <button
                            className="Demo__clear-button"
                            onClick={this.handleCloseClick}
                          >
                            x
                          </button>
                        )}
                      </div>
                      {suggestions.length > 0 && (
                        <div className="Demo__autocomplete-container">
                          {suggestions.map(suggestion => {
                            const className = classnames("Demo__suggestion-item", {
                              "Demo__suggestion-item--active": suggestion.active
                            });
    
                            return (
                              /* eslint-disable react/jsx-key */
                              <div
                                {...getSuggestionItemProps(suggestion, {
                                  className
                                })}
                              >
                                <strong>
                                  {suggestion.formattedSuggestion.mainText}
                                </strong>{" "}
                                <small>
                                  {suggestion.formattedSuggestion.secondaryText}
                                </small>
                              </div>
                            );
                            /* eslint-enable react/jsx-key */
                          })}
                          <div className="Demo__dropdown-footer">
                            <div>
                              <img
                                src="http://files.hostgator.co.in/hostgator254362/image/powered-by-google.png"
                                className="Demo__dropdown-footer-image"
                              />
                            </div>
                          </div>
                        </div>
                      )}
                    </div>
                  );
                }}
              </PlacesAutocomplete>
            </div>
          </div>
        );
      }
    }
    
    render(<App />, document.getElementById('root'));
    
    1 回复  |  直到 6 年前
        1
  •  0
  •   Tholle    6 年前

    这个 searchOptions 将用于 AutocompletionRequest ,它允许您指定 types of the response 是的。

    <PlacesAutocomplete
      value={this.state.postAddress}
      onChange={this.handlePostAddressChange}
      searchOptions={{ types: ['locality', 'country'] }}
    >