Невозможно выбрать предложения, нажав (работает только вкладка) реагировать-места-автозаполнение. (не проблема z-index) - PullRequest
Новая
       13

Невозможно выбрать предложения, нажав (работает только вкладка) реагировать-места-автозаполнение. (не проблема z-index)

0 голосов
/ 17 января 2019

Я пытаюсь изменить отображаемое значение поля ввода после нажатия на предложение в реагирующих местах автозаполнения. При нажатии на предложение скрывается раскрывающийся список с предложениями, выбранное значение не сохраняется и не отображается.

Я предположил, что использование следующего кода должно решить проблему: 

.then(() => {
                this.props.change("venue", selectedVenue)
            })

Но это не работает. Ниже весь фрагмент. 

handleVenueSelect = selectedVenue => {
        geocodeByAddress(selectedVenue)
            .then(results => getLatLng(results[0]))
            .then(latlng => {
                this.setState({
                    venueLatLng: latlng
                });
            })
            .then(() => {
                this.props.change("venue", selectedVenue)
            })
            .catch(error => console.log('geocode ERROR'))
    }

<Field
                                            name='venue'
                                            type='text'
                                            component={PlaceInput}
                                            options={{
                                                location: new google.maps.LatLng(this.state.cityLatLng),
                                                radius: 1000,       
                                                types: ['establishment'] 
                                                }}
                                            placeholder='Event Venue'
                                            onSelect={this.handleVenueSelect}
                                            />

В настоящее время я могу сделать эту работу только после нажатия на кнопку вкладки, но не могу достичь этого, нажав непосредственно на предложение.

1 Ответ

0 голосов
/ 20 января 2019

В следующем примере показано, как обработать выбранное предложение и передать его в Field компонент через Входной объект : 

const LocationSearchInput = props => {
  const handleChange = address => {
    props.input.onChange({ name: address });
  };

  const handleSelect = address => {
    geocodeByAddress(address)
      .then(results => getLatLng(results[0]))
      .then(latLng => {
        props.input.onChange({ name: address, location: latLng });
      })
      .catch(error => console.error("Error", error));
  };

  const SuggestionsList = ({
    getInputProps,
    getSuggestionItemProps,
    suggestions,
    loading
  }) => (
    <div className="autocomplete-root">
      <input {...getInputProps()} />
      <div className="autocomplete-dropdown-container">
        {loading && <div>Loading...</div>}
        {suggestions.map(suggestion => (
          <div {...getSuggestionItemProps(suggestion)}>
            <span>{suggestion.description}</span>
          </div>
        ))}
      </div>
    </div>
  );

  const {
    input: { value }
  } = props;

  return (
    <PlacesAutocomplete
      onChange={handleChange}
      onSelect={handleSelect}
      value={value ? value.name : ""}
    >
      {SuggestionsList}
    </PlacesAutocomplete>
  );
}

Вот демо для вашей справки

...