首页
学习
活动
专区
圈层
工具
发布
社区首页 >问答首页 >如何在“反应-本机-下拉-选择器”中取消已选择的项?

如何在“反应-本机-下拉-选择器”中取消已选择的项?
EN

Stack Overflow用户
提问于 2022-06-14 09:38:13
回答 1查看 330关注 0票数 0

我正在使用反应-本机-下拉-选择器在我的react原生移动应用程序中实现一个下拉列表。

以下是我的代码:

代码语言:javascript
复制
import React, { useState } from 'react';

import { View } from 'react-native';

import DropDownPicker from 'react-native-dropdown-picker';

export default function App() {
  const [open, setOpen] = useState(false);
  const [value, setValue] = useState('');
  const [items, setItems] = useState([
    {label: 'Spain', value: 'spain'},
    {label: 'Madrid', value: 'madrid'},
    {label: 'Barcelona', value: 'barcelona'},
    {label: 'Italy', value: 'italy'},
    {label: 'Rome', value: 'rome'},
    {label: 'Finland', value: 'finland'}
  ]);

  return (
    <View style={{
      flex: 1,
      alignItems: 'center',
      justifyContent: 'center',
      paddingHorizontal: 15
    }}>
      <DropDownPicker
        open={open}
        value={value}
        items={items}
        setOpen={setOpen}
        setValue={setValue}
        setItems={setItems}
      />
    </View>
  );
}

这是输出:

在这里输入图像描述

当用户单击已打开的下拉列表时,我需要取消选中的项目。但却找不到任何道具或方法去做。太感谢你们了。

有人能帮帮我吗?

EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2022-06-14 10:55:19

我想我可能找到了解决办法,去看看:

代码语言:javascript
复制
import { View } from 'react-native';

import DropDownPicker from 'react-native-dropdown-picker';

export default function App() {
  const [open, setOpen] = useState(false);
  const [value, setValue] = useState('');
  const [items, setItems] = useState([
    {label: 'Spain', value: 'spain'},
    {label: 'Madrid', value: 'madrid'},
    {label: 'Barcelona', value: 'barcelona'},
    {label: 'Italy', value: 'italy'},
    {label: 'Rome', value: 'rome'},
    {label: 'Finland', value: 'finland'}
  ]);
  
   const selectValue =  (currentValue:( ((prevState: string) => string) | string )  ) => {
    let chosenValue = (currentValue as ((prevState: string) => string))()
    if (chosenValue === value) {
      setValue('') // basically here, I reset the value to initial state if the selected value is exactly the same with the previously selected one
    } else {
      setValue(currentValue)
    }
  }

  return (
    <View style={{
      flex: 1,
      alignItems: 'center',
      justifyContent: 'center',
      paddingHorizontal: 15
    }}>
      <DropDownPicker
        open={open}
        value={value}
        items={items}
        setOpen={setOpen}
        setValue={selectValue}
        setItems={setItems}
      />
    </View>
  );
}

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/72614744

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档