复选框上的增量和减量计数器

Question

我正在与 Next.js 一起处理一个问题表单，该表单包含不同类型的问题，包括单选答案和多项选择。我有一个进度条，其中的百分比根据 selected 的答案而变化。当我 select 一个问题的答案时，我增加 counter 并且当我取消 select 一个答案时，我减少 counter.

1 - 当我 select 一个问题的复选框首先增加 counter，但当我 select 同一个问题的第二个复选框时它不能增加。

2 - 当我取消select多项选择题答案时，如果其中任何一个被selected，它不得递减，直到最后一个被取消selected.

现在，当 select 第一次增加 counter 但之后，如果我 select 或取消 select，它会减少。

请帮我处理一下。

问题样例：

这是我的代码：

 <MuilteSelectQuestion
      key={item.attributes.Number}
      id={item.attributes.Number}
      data={item}
      name={`${item.attributes.Number}`}
      handleMultiChecked={handleMultiChecked}
  />

组件：

<div className="relative flex items-start">
    {Object.keys(attributes?.options).map(item => (
      <>
          <div className="flex items-center h-5">
               <input
                   {...feild}
                   {...props}
                   id={item}
                   type="checkbox"
                   name={`${name}[]`}
                   value={`${item}`}
                   onClick={e =>
                    handleMultiChecked(
                      `question${id}`,
                      e.target.checked
                    )
                   }
                   className="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded"
               />
            </div>
            <div className="ml-2 mr-3 text-sm">
                 <label
                    htmlFor={item}
                    className="font-medium text-gray-700"
                 >
                   {item}
                 </label>
            </div>
        </>
     ))}
 </div>

函数：

 function handleMultiChecked(val, checked) {
    setCompareTitle(val);
    if (val !== compareTitle && checked) {
        setCounter(++counter);
    } else {
       setCounter(--counter);
    }
}


useEffect(() => {
    setPercent((parseInt(counter) / parseInt(dataCount)) * 100);
}, [counter]);

来自后端的数据：

Answer 1

我建议你有另一个状态来跟踪所有问题的计数器

const [questionCounters, setQuestionCounters] = useState({})

应用于handleMultiChecked

function handleMultiChecked(val, checked) {
    setCompareTitle(val);

    const currentQuestionCounter = questionCounters[val] || 0 // if this question is not in the state, the default counter will be 0

    const updatedQuestionCounter = checked ? currentQuestionCounter + 1 : currentQuestionCounter - 1 //update the current question's counter based on checked

    //no ticks on the current question, we decrease the main counter
    if (currentQuestionCounter === 1 && updatedQuestionCounter === 0) {
        setCounter(--counter);
    }

    //first tick, we increase the main counter
    if(currentQuestionCounter === 0 && updatedQuestionCounter === 1) {
        setCounter(++counter);
    }

    //apply the latest counters' changes for question list
    setQuestionCounters({
       ...questionCounters,
       [val]: updatedQuestionCounter
    })
}


useEffect(() => {
    setPercent((parseInt(counter) / parseInt(dataCount)) * 100);
}, [counter]);

复选框上的增量和减量计数器

Increment and decrement counter on checkbox

javascript

reactjs

next.js