Google Auto Complete Places setzt den Status nicht auf leer, wenn die Eingabe gelöscht wird
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 GooglePlacesAutocomplete
Eingabetext lösche, bleibt der Wert immer noch das zuvor angeklickte Ergebniselement.
Immer wenn ich einen Standort auswähle und auf die Set Camp
Schaltfläche unten klicke, wird das Konsolenprotokoll angezeigt.
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.
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.
Der GooglePlacesAutocomplete
hat eine textInputProps
Requisite, die einen onChangeText
Handler akzeptiert
Verwendung:
textInputProps={{
onChangeText: (text) => { console.log(text) }
}}