如何解决如何从列表中仅选择一项?
我正在尝试列出仅可以选择一项的列表。像带有一个答案的多项选择题。
当前,我可以选择和取消选择我想要的任何项目。
如果我选择其他项目,则希望不选中上一个项目。有人可以指导我吗?预先感谢。
Here's an image of selecting any item
这是每个项目的代码:
import React,{ useState } from "react";
import { CheckBox } from "react-native-elements";
const ListItem = ({ title }) => {
const [state,setState] = useState(false);
return (
<CheckBox
title={title}
checkedIcon="check-circle"
uncheckedIcon="circle-o"
checkedColor="#46A522"
uncheckedColor="black"
checked={state}
onPress={() => setState(!state)}
/>
);
};
export default ListItem;
编辑:父组件:
import { View,Text,FlatList } from "react-native";
import Header from "../components/Header";
import ListItem from "../components/ListItem";
const SelectFromTo = ({ navigation }) => {
const arr = [
{ name: "Abdulpur" },{ name: "Accalpur" },{ name: "Ahasanganj" },{ name: "Akhaura" },{ name: "Banani" },{ name: "Chandpur" },{ name: "Pabna" },];
return (
<View>
<Header title={"Ticket Purchase"} />
<FlatList
data={arr}
keyExtractor={(data) => data.name}
renderItem={({ item }) => <ListItem title={item.name} />}
/>
</View>
);
};
export default SelectFromTo;
解决方法
也许更喜欢使用radio buttons
或者,如果要执行此宽度复选框,则listItems的container元素必须处理所有项目的状态。您可以接受想法here
然后在设置活动复选框之前,重置所有宽度的贴图功能。
,您应该在列表组件中保持选择状态。
类似这样的东西:
const SelectFromTo = () => {
// It can be index/id/name
const [selectedItem,setSelectedItem] = useState(null);
// ...
renderItem={({ item }) => <ListItem title={item.name} checked={item.name === selectedItem} onPress={() => setSelectedItem(item.name)} />}
}
和ListItem
const ListItem = ({ title,checked,onPress }) => {
return (
<CheckBox
// ...
checked={checked}
onPress={onPress}
/>
);
};
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。