我使用模型和平面列表制作了自定义下拉组件。但它显示错误(属性'标签'不存在于类型'never'上)并且它不能正常工作。下面的组件代码是该组件部分的整个块
interface Props {
label: string;
data: Array<{label: string; value: string}>;
onSelect: (item: {label: string; value: string}) => void;
selected?: undefined;
}
const Dropdown: FC<Props> = ({label, data, onSelect}: any) => {
const DropdownButton = React.useRef() as React.MutableRefObject<any>;
const [visible, setVisible] = useState(false);
const [selected, setSelected] = useState(undefined);
const [dropdownTop, setDropdownTop] = useState(0);
const toggleDropdown = (): void => {
visible ? setVisible(false) : openDropdown();
};
const openDropdown = (): void => {
DropdownButton.current.measure(
(_fx: any, _fy: any, _w: any, h: any, _px: any, py: any) => {
setDropdownTop(py + h);
},
);
setVisible(true);
};
const onItemPress = ({item}: any): void => {
setSelected(item);
onSelect(item);
setVisible(false);
};
const renderItem = ({item}: any): ReactElement<any, any> => (
<TouchableOpacity style={styles.item} onPress={() => onItemPress(item)}>
<Text>{item.label}</Text>
</TouchableOpacity>
);
const renderDropdown = (): ReactElement<any, any> => {
return (
<Modal visible={visible} transparent animationType="none">
<TouchableOpacity
style={styles.overlay}
onPress={() => setVisible(false)}>
<View style={[styles.dropdown, {top: dropdownTop}]}>
<FlatList
data={data}
renderItem={renderItem}
keyExtractor={(item, index) => index.toString()}
/>
</View>
</TouchableOpacity>
</Modal>
);
};
return (
<TouchableOpacity
ref={DropdownButton}
style={styles.button}
onPress={toggleDropdown}>
{renderDropdown()}
<Text style={styles.buttonText}>
{(selected && selected.label) || label}
</Text>
<Icon
style={styles.icon}
type="font-awesome"
name="chevron-down"
tvParallaxProperties={undefined}
/>
</TouchableOpacity>
);
};
及其用法如下:-
const [selected, setSelected] = useState(undefined);
const data = [
{label: 'One', value: '1'},
{label: 'Two', value: '2'},
{label: 'Three', value: '3'},
{label: 'Four', value: '4'},
{label: 'Five', value: '5'},
];
return <Dropdown label="Select Item" data={data} onSelect={setSelected} />;
主要错误:-单击下拉列表中的值后,它未显示为选中状态。