javascript - how to make TextInput with dropdownpicker in react-native? - Stack Overflow

admin管理员组

文章数量:1302319

I need to make a text input that shows a list of items as soon as you start typing. And only those items(in the list) can be selected as the option for input. I tried using the picker ponent but I need to add a feature where the user can type and items related to it will be shown in the dropdown/picker and then the user will be able to select one of them as the option.

I need to make a text input that shows a list of items as soon as you start typing. And only those items(in the list) can be selected as the option for input. I tried using the picker ponent but I need to add a feature where the user can type and items related to it will be shown in the dropdown/picker and then the user will be able to select one of them as the option.

• javascript
• reactjs
• react-native
• user-input

Share Improve this question Follow asked Jan 13, 2022 at 4:18 YusYus 18411 gold badge77 silver badges1717 bronze badges 1

• Please provide enough code so others can better understand or reproduce the problem. – Community Bot Commented Jan 21, 2022 at 10:19

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 7

If you want to make it with your own custom design, then go with something like this:

  const [filterBankList, setFilterBankList] = useState([]);
  const [bankName, setBankName] = useState('');


            <TextInput
                  value={bankName}
                  placeholder={strings.selectBankName}
                  style = {styles.textInput}
                  onChangeText={filterBanks}
                />
                <FlatList
                  data={filterBankList}
                  renderItem={({item, index}) => (
                    <TouchableOpacity
                      onPress={() => onBankSelected(item?.bank)}>
                      <VariantsBox>
                        <Text
                          >
                          {item?.bank || ''}
                        </Text>
                      </VariantsBox>
                    </TouchableOpacity>
                  )}
                  keyExtractor={item => item.bank}
                />

Inside your filterBanks method, you can update the filterBankList, so that the flatlist is updated with the bank name.

const filterBanks = value => {
    
    let filterData =
      bankList && bankList?.length > 0
        ? bankList?.filter(data =>
            data?.bank?.toLowerCase()?.includes(value?.toLowerCase()),
          )
        : [];
    setFilterBankList([...filterData]);
  };

Inside your onBankSelected(which you call when you have selected one of the options), then just set the bankName and empty the filterlist.

const onBankSelected = value => {
    setBankName(value);
    setFilterBankList([]);
  };

And if you want to use some library to avoid this, you can then go with react-native-searchable-dropdown

本文标签： javascripthow to make TextInput with dropdownpicker in reactnativeStack Overflow