无法通过单击（仅选项卡有效）react-places-autocomplete 来 select 建议。 （不是 z-index 问题）

Question

我在点击 react-places-autocomplete 的建议后尝试更改输入字段的显示值。单击建议会隐藏带有建议的下拉菜单，不会保存或显示所选值。

我认为使用以下代码应该可以解决问题：

.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}
                                            />

目前，我只能在点击标签按钮后才能完成这项工作，但无法通过直接点击建议来实现。

Answer 1

以下示例演示如何处理选定的建议并通过 Input object 将其传递到 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>
  );
}

这里有一个demo供大家参考

Answer 2

一个简单的解决方案是，您可以在显示 suggestionItemProps 的 div 中设置 onClick。 查看第 10 行

<PlacesAutoComplete value={this.state.address} onChange={this.handleChange} onSelect={this.handleSelect} defaultValue={this.state.address} >
    {({ getInputProps, suggestions, getSuggestionItemProps, loading}) => (
        <div>
            <input className="partner-info-input" {...getInputProps({placeholder: "Address"})} />
            <div>
                {loading ? <div>Loading...</div> : null}
                {suggestions.map(suggestion => {
                    const style = suggestion.active ? { backgroundColor: '#974803', cursor: 'pointer' } : { backgroundColor: '#2d2d2d', cursor: 'pointer' };
                    return(
                        <div {...getSuggestionItemProps(suggestions, { style })} onClick={(e) => {this.handleClick(suggestion)}}>
                            {suggestion.description}
                        </div>
                    );
                })}
            </div>
        </div>
    )}
</PlacesAutoComplete>

在 handleClick 方法中

handleClick(address) {
    geocodeByAddress(address.description)
        .then(results => getLatLng(results[0]))
        .then(latLng => this.setState({address: address.description, lat: latLng.lat, long: latLng.lng}))
        .catch(error => console.error('Error', error));
}