當輸入被清除時Google Auto Complete Places沒有將狀態設置爲空

Question

我正在使用react-native-google-places-autocomplete來自動完成地點。我得到的結果是沒有輸入問題，並獲得自動完成搜索的地方。

但是，當我點擊了一定的成績，然後我再清除GooglePlacesAutocomplete輸入文本，該值仍然是以前的 點擊結果項目。

每當我選擇一個位置，我點擊Set Camp下面的按鈕是控制檯日誌。

這是其他屏幕截圖，每當我清除輸入文本和按鈕再次單擊我希望得到未定義或空字符串的控制檯日誌，但我得到的一個結果。這是截圖。

下面是我對工作的代碼：

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); 

動作/ 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); 
    } 
    }; 

動作/ index.js

export * from './location_action'; 

動作/ types.js

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

減速器/ 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; 
    } 
} 

減速器/ index.js

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

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

我希望每當我明確的inputText描述的道具價值也應被清除。有人請指出要實現這一點。謝謝。

Answer 1

的GooglePlacesAutocomplete有textInputProps道具，它接受一個onChangeText處理

用法：

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