Google Auto Complete Places setzt den Status nicht auf leer, wenn die Eingabe gelöscht wird


Jason

Ich verwende React-native-google-places-autocomplete für die automatische Vervollständigung von Orten. Ich erhalte das Ergebnis, dass es kein Problem bei der Eingabe und beim Abrufen der von Autocomplete gesuchten Orte gibt.

Aber wenn ich auf ein bestimmtes Ergebnis klicke und dann wieder den GooglePlacesAutocompleteEingabetext lösche, bleibt der Wert immer noch das zuvor angeklickte Ergebniselement.

Immer wenn ich einen Standort auswähle und auf die Set CampSchaltfläche unten klicke, wird das Konsolenprotokoll angezeigt.Bildbeschreibung hier eingeben

Hier ist ein anderer Screenshot, wenn ich den Eingabetext lösche und erneut auf die Schaltfläche klicke. Ich möchte ein Konsolenprotokoll mit undefinierter oder leerer Zeichenfolge erhalten, aber ich erhalte das vorherige Ergebnis. Hier ist ein Screenshot.Bildbeschreibung hier eingeben

Unten ist der Code, an dem ich arbeite:

SetCampScreen.js

  import React, { Component } from 'react';
  import { View,
    Text,
    ScrollView,
    TextInput
  } from 'react-native';
  import * as actions from '../../actions';
  import { connect } from 'react-redux';
  import { GooglePlacesAutocomplete } from 'react-native-google-places-autocomplete';

  class SetCampScreen extends Component {
    static navigationOptions = {
            header: null,
          };
    gotoPatientRegistrationScreen = () => {
      console.log('At Patient Registration method.', this.props.description);

    }
    sendData = (data) => {
      console.log('From send Data: ',data);
      this.props.setLocation(data);
    }
    render() {
      return (
        <ScrollView contentContainerStyle={{flexGrow : 1, justifyContent : 'center'}}>
            <View style={styles.container}>

              <GooglePlacesAutocomplete
              placeholder="Where are you?"
              minLength={2} // minimum length of text to search
              autoFocus={false}
              returnKeyType={'search'} // Can be left out for default return key https://facebook.github.io/react-native/docs/textinput.html#returnkeytype
              listViewDisplayed="auto" // true/false/undefined
              fetchDetails={true}
              enablePoweredByContainer={false}
              renderDescription={row => row.description}
              styles={{
              textInputContainer: {
                height: 50,
              },
              textInput: {
                borderRadius: 0,
                marginLeft: 0,
                marginRight: 0,
                marginTop: 0,
                height: 50,
                borderWidth: 1,
                borderColor: '#000',
              },
              predefinedPlacesDescription: {
                color: '#1faadb',
              },
              }} // custom description render
              onPress={(data, details = null) => {
              // 'details' is provided when fetchDetails = true
              this.sendData(data);

              }}
              getDefaultValue={() => {
              return ''; // text input default value
              }}
              query={{
              // available options: https://developers.google.com/places/web-service/autocomplete
              key: 'API_KEY',
              language: 'en', // language of the results
              }}

              currentLocation={false} // Will add a 'Current location' button at the top of the predefined places list
              currentLocationLabel="Current location"
              nearbyPlacesAPI="GooglePlacesSearch" // Which API to use: GoogleReverseGeocoding or GooglePlacesSearch
              GoogleReverseGeocodingQuery={{

              }}
              debounce={200}
              />
              <Button
                title="Set Camp"
                onPress={this.gotoPatientRegistrationScreen}
              />
            </View>
        </ScrollView>
      );
    }
  }
  const styles = {
    container: {
        flex: 1,
        backgroundColor: '#fff',
        justifyContent: 'center'
    },
    textInputStyle: {
      fontSize: 16,
      paddingLeft: 8,
      paddingBottom: 3,
      paddingRight: 8,
      height: 60,
    },
  };
  const mapStateToProps = state => {
    return {
         description: state.location.locationResponse
       };
  }
  export default connect(mapStateToProps, actions)(SetCampScreen);

action/location_action.js

  import axios from 'axios';
  import { NO_INTERNET, SET_LOCATION } from './types';
  import { NetInfo } from 'react-native';

  export const setLocation = (place) => async dispatch => {
    const { description } = place;
    console.log('Description from setLocation: ',description);
    let netState = await NetInfo.isConnected.fetch();
    console.log('Net state', netState);
    if(!netState) {
      return dispatch({ type: NO_INTERNET });
    }
    try {
      dispatch ({ type: SET_LOCATION, payload: description });
    } catch(exp) {
      console.log(exp);
    }
  };

Aktionen/index.js

export * from './location_action';

action/types.js

export const NO_INTERNET = 'no_internet';
export const SET_LOCATION = 'set_location';

Reducers/location_reducers.js

import { NO_INTERNET, SET_LOCATION } from '../actions/types';

export default function(state = {}, action) {
  switch(action.type) {
    case SET_LOCATION:
      return { locationResponse: action.payload };

    default:
      return state;
  }
}

Reducer/index.js

import { combineReducers } from 'redux';
import locationResponse from './location_reducer';

export default combineReducers({
  location: locationResponse,
});

Ich erwarte, dass, wenn ich den InputText lösche, auch der Props-Wert der Beschreibung gelöscht werden sollte. Jemand bitte mich darauf hinweisen, dies zu erreichen. Vielen Dank.

Jason

Der GooglePlacesAutocompletehat eine textInputPropsRequisite, die einen onChangeTextHandler akzeptiert

Verwendung:

textInputProps={{
 onChangeText: (text) => { console.log(text) }
}}

Verwandte Artikel