如何使用React Native Paper复选框或使用FlatList的复选框项目

Question

对于当前源，您只能一次选中和取消选中。我想一个接一个地做。。。

obdngList列表中的行数尚未确定。举个例子，我写了两行。

帮助：(非常感谢。

const [checked, setChecked] = React.useState(false);
const obdngList = 
[ 
{"a": "test1", "b": "test2", "c": "test3"}
, {"a": "test111", "b": "test222", "c": "test333"}
];

<FlatList
data={obdngList}
renderItem={({ item }) => (
<Checkbox.Item 
label={item.a}
value={item.b}
status={checked ? 'checked' : 'unchecked'} 
onPress={() => {
setChecked(!checked)
}}
/>
)}
/>

Answer 1

您的代码的问题是您对所有检查表都使用checked，这意味着如果您的检查表中有一个是"已检查"；那么所有这些都将是"；"已检查"；也

如果你想解决你的问题，你需要把state改成

const [obdngList, setObdngList] = useState([ 
{"a": "test1", "b": "test2", "c": "test3", checked: false},
{"a": "test111", "b": "test222", "c": "test333", checked: false}
]);

这样，每个检查表都有自己的checked值。

这里有一个你可以尝试的解决方案：

const [obdngList, setObdngList] = useState([
{ a: 'test1', b: 'test2', c: 'test3', checked: false },
{ a: 'test111', b: 'test222', c: 'test333', checked: false },
]);
<FlatList
data={obdngList}
renderItem={({ item, index }) => (
<Checkbox.Item
label={item.a}
value={item.b}
status={item.checked ? 'checked' : 'unchecked'}
onPress={() => {
const tempArr = [...obdngList];
tempArr.splice(index, 1, { ...item, checked: !item.checked });
setObdngList(tempArr);
}}
/>
)}
/>;