如何在本机反应中显示从可搜索下拉列表中选择的项目？

Posted 2023-02-21

【中文标题】如何在本机反应中显示从可搜索下拉列表中选择的项目？

【英文标题】：how to display item selected from searchable dropdown in react native?

【发布时间】：2021-06-18 02:46:44

【问题描述】：

我希望年份显示在从下拉列表中选择时 这是我的代码 在此，所选项目显示为警报 我想给搜索框设置文字 导入反应， useState，useEffect from 'react'; 从 'react-native' 导入 StyleSheet,SafeAreaView, Text, View, TextInput, Image, Button, FlatList, TouchableOpacity ； 从 'react-native-searchable-dropdown' 导入 SearchableDropdown；

const years = [
    id:1, name:'2021',
    id:2, name:'2020',
    id:3, name:'2019',
    id:4, name:'2018',
    id:5, name:'2017',
    id:6, name:'2016',
    id:7, name:'2015' 
  ];
export default function Year() 
    console.log("App Executed")
return (
      <SafeAreaView>
<Text style=styles.headingText>
        Select Year
      </Text>
      <SearchableDropdown
          onTextChange=(text) => console.log(text)
          //On text change listner on the searchable input
          onItemSelect=(year) => alert(JSON.stringify(year))
          //onItemSelect called after the selection from the dropdown
          containerStyle= padding: 5 
          //suggestion container style
          textInputStyle=
            //inserted text style
            padding: 12,
            borderWidth: 1,
            borderColor: '#ccc',
            backgroundColor: '#FAF7F6',
          
          itemStyle=
            //single dropdown item style
            padding: 10,
            marginTop: 2,
            backgroundColor: '#FAF9F8',
            borderColor: '#bbb',
            borderWidth: 1,
          
          itemTextStyle=
            //text style of a single dropdown item
            color: '#222',
          
          itemsContainerStyle=
            //items container style you can pass maxHeight
            //to restrict the items dropdown hieght
            maxHeight: '50%',
          
          items=years
          //mapping of item array
          defaultIndex="eg:2021"
          //default selected item index
          placeholder="eg:2021"
          //place holder for the search input
          resetValue=false
          //reset textInput Value with true and false state
        />
</SafeAreaView>
)
 const styles = StyleSheet.create(
        container: 
          flex: 1,
          backgroundColor: 'white',
          padding: 10,
        ,
        titleText: 
          padding: 8,
          fontSize: 16,
          textAlign: 'center',
          fontWeight: 'bold',
        ,
        headingText: 
          padding: 10,
        ,
      );

【参考方案1】：

我无法使用状态 这是解决方案

const years = [
    id:1, name:'2021',
    id:2, name:'2020',
    id:3, name:'2019',
    id:4, name:'2018',
    id:5, name:'2017',
    id:6, name:'2016',
    id:7, name:'2015' 
  ];
 export default function Year() 
    const [selectedItems, setSelectedItems] = useState()
    console.log("App Executed")
    return(
        <SafeAreaView>

<SearchableDropdown

          onTextChange=(text) => console.log(text)
          //On text change listner on the searchable input
          selectedItems=selectedItems
          onItemSelect=(year) => setSelectedItems(year)
          
          //onItemSelect called after the selection from the dropdown
          containerStyle= padding: 5 
          //suggestion container style
          textInputStyle=
            //inserted text style
            padding: 12,
            borderWidth: 1,
            borderColor: '#ccc',
            backgroundColor: '#FAF7F6',
          
          itemStyle=
            //single dropdown item style
            padding: 10,
            marginTop: 2,
            backgroundColor: '#FAF9F8',
            borderColor: '#bbb',
            borderWidth: 1,
          
          itemTextStyle=
            //text style of a single dropdown item
            color: '#222',
          
          itemsContainerStyle=
            //items container style you can pass maxHeight
            //to restrict the items dropdown hieght
            maxHeight: '50%',
          
          items=years
          //mapping of item array
          defaultIndex="eg:2021"
          //default selected item index
          placeholder="eg:2021"
          //place holder for the search input
          resetValue=false
          //reset textInput Value with true and false state
        />

【讨论】：

将 selectedItems=selectedItems 添加到您的选项中就可以了

【参考方案2】：

我通过这种技巧爱上了它：

const getTypeNameById_func = async id => 
    const dataa = await accountsType.find(item => 
      if (item.ID == id) 
      return item.NAME;
    );
    setTextSearchable(dataa.NAME);
  ;

在可搜索的下拉菜单中：

 <SearchableDropdown
              items=filterData
               placeholder=String(**textSearchable**)
              resetValue=false
              underlineColorandroid="transparent"
              onTextChange=text => console.log(text)
              onItemSelect=item => 
                getTypeNameById_func(item.id);
                setAccountType(item.id);
              
              defaultIndex=1
/>

【参考方案3】：

你可以使用 useState 变量并在占位符中传递该变量，例如：-

placeholder=variableName