reactjs - 来自 react-native-searchable-dropdown 的 React-native 组件 SearchableDropdown 不会触发 onItemSelect={(item) => {console.log(item)}}

Question

我想使用SearchableDropdownfromreact-native-searchable-dropdown作为具有自动完成功能的下拉选择。onItemSelect当从下拉列表中选择一个元素时应该触发该事件。但它不会这样触发。

import SearchableDropdown from 'react-native-searchable-dropdown';
import React, {Component} from 'react';

 constructor(props) {
    super(props);
    this.state = {
      selectedId: 0,
    };
  }

...

export default class SearchComponent extends Component {

render() {
   return(
      <ScrollView>
        <SearchableDropdown
          onItemSelect={item => console.log(item)}
          containerStyle={{padding: 5}}
          itemStyle={{
            padding: 10,
            marginTop: 2,
            backgroundColor: 'white',
            borderColor: 'white',
            borderWidth: 1,
            borderRadius: 5,
          }}
          itemTextStyle={{color: 'black'}}
          itemsContainerStyle={{height: 220}}
          items={skills}
          resetValue={false}
          textInputProps={{
            placeholder: 'Placeholder',
            underlineColorAndroid: 'transparent',
            style: {
              padding: 12,
              borderWidth: 1,
              backgroundColor: 'white',
              borderColor: theme.colors.caption,
              borderRadius: 10,
            },
            onTextChange: text => alert(text),
          }}
          listProps={{
            nestedScrollEnabled: true,
          }}
        />
    </ScrollView>
)}

有人可以帮我解决问题吗？

标签： reactjsreact-native

Answer 1

也可以通过将此道具添加keyboardShouldPersistTaps = 'always' 到 ScrollView 组件来解决此问题。

这为我解决了这个问题，见下文：

render() {
   return(
      <ScrollView 
         keyboardShouldPersistTaps = 'always'>
        <SearchableDropdown
          onItemSelect={item => console.log(item)}
          ...
        />
      </ScrollView>
   )
}