如何使用反应钩子限制多个复选框输入

Question

I'm trying to implement a form where a user is only only to check 3 mark three boxes and uncheck mark.

For whatever reason setCurrentData(currentData - 1) doesn't decrement. Therefore, when a user deselects, the currentData is still set to 3 when they select up to three, and will not be able to check mark a box.

Any reason why the decrement isn't working? Seems like it should work no? Am I missing something trivial?

The concept is similiar to this stackoverflow answer. selection limit function not working on checkbox form reactjs

with this code sandbox

https://codesandbox.io/s/j4yyx9v6l5?fontsize=14

const Survey = (props) => {
    const { t } = useTranslation();

    const [checkedItems, setCheckedItems] = useState([]);
    const [currentData, setCurrentData] = useState(0);
    const [comments, setComments] = useState("");

    const handleChange = useCallback(
        (e) => {
            console.log("after", currentData)
            let isSelected = e.currentTarget.checked;
            const limit = 3
            let item = e.target.name
            let text = e.target.value

            let items = [...checkedItems, item];
            let uniqueItems = [...new Set(items)]

            if (text) {
                setComments(text)
            }

            if (isSelected) {
                if (currentData < limit) {
                    setCurrentData(currentData + 1)
                    setCheckedItems(uniqueItems);
                } else {
                    e.preventDefault();
                    setCurrentData(currentData - 1)
                    e.currentTarget.checked = false;
                }
            } else {
                console.log("before", currentData)
                setCurrentData(currentData - 1)
                console.log("after", currentData)
            }
        }, [checkedItems, comments]
      );


    return (
        <React.Fragment>
                    {
                        surveyItems.map((item, index) => {
                            return (
                                <Checkbox
                                    key={index}
                                    name={item.name}
                                    label={item.value}
                                    onChange={handleChange}
                                />
                            )
                        })
                    }
                    <TextBox onChange={handleChange}/>
        </React.Fragment>
    )
};

Answer 1

The handle change needed to remove the items in the array when deselected. Check the last else block.

 const handleChange = useCallback(
        (e) => {

            const limit = 3
            let isSelected = e.currentTarget.checked;
            let item = e.target.name
            let text = e.target.value

            if (text) {
                setComments(text)
            }

            if (isSelected) {
                if (checkedItems.length < limit) {
                    setCheckedItems([item, ...checkedItems]);
                } else {
                    e.preventDefault();
                    e.currentTarget.checked = false;
                }
            } else {
                const findIndexOfItem = checkedItems.findIndex((element) => element === item)
                checkedItems.splice(findIndexOfItem, 1)
                setCheckedItems(checkedItems)
            }
        }, [checkedItems, comments]
      );

Answer 2

There is a typo in the code let uniqueItems = [...new Set(items) missing closing ]

I think there is no problem with your code, just an observation that may trick you

console.log("before", currentData)
setCurrentData(currentData - 1)
console.log("after", currentData)

You can't rely in the currentData after a setState because it is async, probably isn't changed yet.