我正在使用反应-本机-下拉-选择器在我的react原生移动应用程序中实现一个下拉列表。
以下是我的代码:
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>
);
}
这是输出:
当用户单击已打开的下拉列表时,我需要取消选中的项目。但却找不到任何道具或方法去做。太感谢你们了。
有人能帮帮我吗?
发布于 2022-06-14 10:55:19
我想我可能找到了解决办法,去看看:
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>
);
}
https://stackoverflow.com/questions/72614744
复制相似问题