[英]How to deselect an already selected item in the react-native-dropdown-picker?
I'm using react-native-dropdown-picker to implement a dropdown in my react-native mobile app.我正在使用react-native-dropdown-picker在我的 react-native 移动应用程序中实现下拉菜单。
Following is my code:以下是我的代码:
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> ); }
This is the output:这是输出:
enter image description here在此处输入图像描述
I need to deselect the already selected item, when the user clicks on that selected at the opened dropdown.当用户单击在打开的下拉列表中选择的项目时,我需要取消选择已选择的项目。 But could not find any props or method to do so.
但是找不到任何道具或方法来做到这一点。 Thank you so much guys.
十分感谢大家。
Can someone please help me?有人可以帮帮我吗?
I think I might've found a solution, check it out:我想我可能已经找到了解决方案,请查看:
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> ); }
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.