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时，也应该清除描述的props值。有人请指出我实现这一目标。谢谢。

Answer 1

GooglePlacesAutocomplete有一个textInputProps道具，可以接受onChangeText处理程序

用法：

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

Answer 2

就我而言，这有助于清除搜索结果和文本输入

清除按钮，添加 onPress = {（）=> {clearSearch（）; this.textInput.clear（）}} 并给ref这样的文本输入 ref = {input => {this.textInput = input}}

下面是示例代码：

<GoogleAutoComplete apiKey={API_KEY} debounce={300} minLength={3 >
        {({ inputValue, handleTextChange, locationResults, fetchDetails, clearSearch ,isSearching
         }) => (
            <React.Fragment>
            <View style={{ marginTop: 80,flexDirection: 'row'}}>
                <TextInput ref={input => { this.textInput = input }} 
                    style={{ height:40,width:300,borderWidth:1,paddingHorizontal:16 }}
                    value={inputValue}
                    onChangeText={handleTextChange}
                    placeholder="Add Address..."
                />
                <Button title="Clear" onPress={()=>{clearSearch();this.textInput.clear() }} />
            </View>
            {isSearching && <ActivityIndicator size="large" color="red" />}
            <ScrollView>
                {locationResults.map((el, i) => (
                <LocationItem
                    props={props}
                    {...el}
                    fetchDetails={fetchDetails}
                    onAutoCompleteInput={this.onAutoCompleteInput}
                    key={String(i)}
                />
                ))}
            </ScrollView>
            </React.Fragment>
        )}
        </GoogleAutoComplete>

清除输入时，Google自动完成位置不会将状态设置为空

2 个答案: