javascript - React-native 复选框逻辑

Question

我有一个复选框，如果选中了复选框，我想将复选框名称添加到数组中，当它未选中时，我想将其从数组中删除并取消选择它。我尝试了一些东西，但它有问题。请有人可以帮助我，如果有更好的方法请提出建议。

这是我的代码

import React, { useState } from "react";
import { CheckBox, Button } from "react-native-elements";
const Occasion = props => {
    const [tags, setTags] = useState([]);
    //Checks
    const [today, setToday] = useState(false);
    const [tommorow, setTommorow] = useState(false);
    const [someDay, setSome] = useState(false);
    const CustomCheck = (props) => {
        const { checked, title, onSelect } = props;
        return (
            <CheckBox
                checked={checked}
                onPress={onSelect}
                title={title}
            />
        );
    };
    const handleChecked = (item) => {
        const existingIndex = tags.findIndex(
            tag => tag === item
        );
        switch(item){
            case 'Now':
                setToday(!today)
                if (existingIndex >= 0) {
                    const filteredItems = tags.filter(tag => tag !== item)
                    return setTags(filteredItems)
                }else{
                    setTags(tags.concat(item))
                }
            case 'Tommorow':
                setTommorow(!tommorow)
                if (existingIndex >= 0) {
                    const filteredItems = tags.filter(tag => tag !== item)
                    return setTags(filteredItems)
                }else{
                    setTags(tags.concat(item))
                }
            case 'SomeDay':
                setSome(!someDay)
                if (existingIndex >= 0) {
                    const filteredItems = tags.filter(tag => tag !== item)
                    return setTags(filteredItems)
                }else{
                    setTags(tags.concat(item))
                }
            default: 
                return null
        }

    }
    console.log('tags is', tags)
    return (
        <View style={styles.container}>
            <CustomCheck title="Now" checked={today} onSelect={() => {handleChecked("Now") }} />
            <CustomCheck title="Tommorow" checked={tommorow} onSelect={() => { handleChecked("Tommorow") }} />
            <CustomCheck title="SomeDay" checked={someDay} onSelect={() => { handleChecked("SomeDay") }} />
        </View>
    );
};

export default Occasion;

标签： javascriptreact-nativeswitch-statementreact-hooks