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

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

Location 组件位于 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 列表不关闭

react-native-autocomplete-input list not closing when selecting an option

javascript

css

jsx

reactjs

react-native