Question

当我从列表中选择一个项目时，我的react-native-autocomplete-input列表似乎没有关闭。

let Location = (props) => (

  <View style={styles.formItem}>

    <Autocomplete
      data={props.autocompleteResults.predictions}
      defaultValue={props.locationInput.toString()}
      onChangeText={
        text => {
          props.updateLocationInput(text)
          props.getAutocompleteResults(text)
        }
      }
      renderItem={place => (
        <TouchableOpacity
          style={{
            height: 44,
            flex: 1,
            justifyContent: 'center',
            ...styles.label,
            borderRadius: 8
          }}
          onPress={() => {
            console.log(place)
            props.updatePlace(place)
            props.updateLocationInput(place.description)
          }}>
          <Text numberOfLines={1}>{place.description}</Text>
        </TouchableOpacity>
      )}
      inputContainerStyle={{ borderWidth: 0 }}
      style={{
        height: 44,
        borderRadius: 8,
        backgroundColor: '#FFFFFF',
        alignSelf: 'stretch',
        paddingLeft: 10,
        position: 'relative',
        ...styles.label
      }}
    />
  </View>
)
Location.propTypes = {
  locationInput: React.PropTypes.string.isRequired,
  updateLocationInput: React.PropTypes.func.isRequired,
  getAutocompleteResults: React.PropTypes.func.isRequired,
  autocompleteResults: React.PropTypes.object.isRequired,
  updatePlace: React.PropTypes.func.isRequired
}

Location = connect(
  mapStateToProps,
  mapDispatchToProps
)(Location)

这是Location组件的使用方式。 Container是一个基于本机的组件：

<Container style={styles.container}>
        <ScrollView keyboardShouldPersistTaps={true}>
          <Categories />
          <View style={{ zIndex: 2, position: 'relative' }}>
            <Location />
          </View>
          <Keywords />
          <Button block style={styles.wideButton} onPress={() => props.toggleMenu()}>
            <Text>GO</Text>
          </Button>
        </ScrollView>
      </Container>

位置组件位于ScrollView内但是当我将scrollview取出时问题仍然存在。此外，我已完成滚动视图修复<ScrollView keyboardShouldPersistTaps={true}>什么可能使列表永远不会关闭？

Answer 1

我们可以试试这个： -

//if data is not available then there would be nothing to show..
data={(!props.autocompleteResults.predictions.length || props.clicked)? [] : props.autocompleteResults.predictions }

onChangeText={
        text => {
          props.updateLocationInput(text)
          props.getAutocompleteResults(text)
          props.changeClick(false)
        }
      }

onPress={() => {
            console.log(place)
            props.updatePlace(place)
            props.updateLocationInput(place.description)
            props.changeClick(true) 
          }}

Inside the component:

constructor(props)
{
  super(props);
  this.state={ clicked : false }
}

<Location clicked = {this.state.clicked} changeClick={(isClicked) => this.setState({clicked: isClicked})} />

干杯：）

选择选项时，react-native-autocomplete-input列表未关闭

1 个答案: