如何选择多个复选框并在本机反应中获取选定复选框的值？

Question

我在Flatlist 中有一个复选框，但我不知道如何从Flatlist 获取复选框的索引和设置复选框。另外，我想从平面列表中获取数据选择复选框。因此，用户将获得选中的复选框，基于单击的按钮将被接受或拒绝。

这是我的数组：

const DATA = [
    {
        "start": "2022-01-01 10:35:08",
        "id": "298269",
        "tanggal": "01-01-2022",
        "hari": "Saturday",
        "waktu": "10:35:08",
        "keterangan_plan": null,
        "outlet": "26506",
        "nama": "RS Ibu dan Anak Propinsi NAD",
        "nama_customer": "DR. IQBAL",
        "customer": "39359",
        "prod1": "ADSV WOUND STRIP ",
        "prod2": "",
        "prod3": "",
        "prod4": "",
        "keterangan": "tes",
        "title": "",
        "end": "2022-01-01",
        "verifikasi": "Y",
        "status": null,
        "job": "Dokter",
        "lokasi": "-6.992191,107.590668",
        "verifikasi_plan": null
    },
    {
        "start": "2022-01-01 10:42:57",
        "id": "298270",
        "tanggal": "01-01-2022",
        "hari": "Saturday",
        "waktu": "10:42:57",
        "keterangan_plan": null,
        "outlet": "26506",
        "nama": "RS Ibu dan Anak Propinsi NAD",
        "nama_customer": "RONI",
        "customer": "39362",
        "prod1": "COAT ",
        "prod2": "",
        "prod3": "COAT ",
        "prod4": "",
        "keterangan": "cek",
        "title": "",
        "end": "2022-01-01",
        "verifikasi": "Y",
        "status": null,
        "job": "Pharmacist",
        "lokasi": "-6.992191,107.590668",
        "verifikasi_plan": null
    },
];

这是我渲染平面列表的代码

const SubmitVerKunjungan = () => {
    

    const [datas, setData] = useState(DATA);
    const [toggleCheckBox, setToggleCheckBox] = useState(false);

    const renderFlatlist = (renderData) =>{
        return(
            <FlatList
                    data={renderData}
                    renderItem={({ item }) => (
                        <View style={style.viewItem}>
                            <View style={style.firstItem}>
                                <Text style={style.tanggal}>{item.hari}, {item.tanggal}</Text>
                                <Text style={style.lokasi}></Text>
                                <Checkbox
                                    disabled={false}
                                    value={toggleCheckBox}
                                    onValueChange={(newValue) => setToggleCheckBox(newValue)}
                                />
                             </View>
                             <View style={style.secondItem}>
                                 <View style={style.secondItemSub}>
                                        <Image
                                          style={style.iconOffice}
                                            source={require('../../assets/office.png')}/>
                                        <View style={style.subSecondItem}>
                                            <Text style={style.subSecondItemTitle}>{item.nama}</Text>
                                            <Text style={style.subSecondItemTitle}>{item.nama_customer}       ({item.job})</Text>
                                        </View>
                                    </View>
                                    <Image
                                        style={style.iconMaps}
                                        source={require('../../assets/maps.png')}/>
                                </View>
                                <Text style={style.keteranganItem}>Keterangan : {item.keterangan}</Text>
                                <View style={style.thirdItem}>
                                    <Text style={style.produkItem}>Produk : {item.prod1},{item.prod2},{item.prod3},{item.prod4}</Text>
                                </View>
                            </View>)}
                        keyExtractor={item => item.id}
                    />
            
        )

    }

    return (
        <ImageBackground source={require('../../assets/background.jpg')} resizeMode="cover" style={style.imageBackground}>
            <View style={style.container}>
                <View style={style.buttonContainer}>
                    <View style={style.buttonView}>
                        <Text style={style.button}>APPROVE</Text>
                        {/* this will show checked item on checkbox */}
                    </View>
                    <View style={style.buttonView}>
                        <Text style={style.button}>REJECT</Text>
                    </View>
                </View>
                <ScrollView>
                    {renderFlatlist(datas)}
                </ScrollView>
            </View>
        </ImageBackground>
    );
};

export default SubmitVerKunjungan;

Answer 1

做简单的把戏 在数据集中添加状态 或者

setData(Data.map(item => {item.state = false; return item;}));

然后在复选框中

<Checkbox value={item.state} onPress={() => handleCheckbox(item)}

const handleCheckbox = (item) => {
const index = datas.findIndex(x => x === item);
const datasClone = [...datas];
datasClone[index].state = !datasClone[index].state;
setData(datasClone);
}

获取所有选中的

const handleSubmit = () => {
const selectedOnes = datas.filter(x => x.state);
console.log(selectedOnes);
}