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

Question

我希望年份显示在从下拉列表中选择时 这是我的代码 在此，所选项目显示为警报 我想给搜索框设置文字 导入反应，{ 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,
        },
      });

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

Answer 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}
/>

Answer 3

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

placeholder={variableName}