Я работаю с Next.js для обработки формы вопроса, в которой есть разные типы вопросов с ответами с одним и несколькими вариантами ответов. У меня есть индикатор выполнения, в котором его проценты меняются в зависимости от выбранных ответов. когда я выбираю ответ на вопрос, я увеличиваю counter
, а когда я отменяю выбор ответа, уменьшаю counter
.
1 - Когда я устанавливаю флажок вопроса, сначала увеличивайте counter
, но он не должен увеличиваться, когда я устанавливаю второй флажок в том же вопросе.
2 - Когда я отменяю выбор ответа на вопросы с множественным выбором, он не должен уменьшаться, если какой-либо из них выбран, он не должен уменьшаться до тех пор, пока последний не будет отменен.
Теперь при первом выборе он увеличивает counter
, но после этого, если я выбираю или отменяю выбор, он уменьшается.
Пожалуйста, помогите мне справиться с этим.
Образец вопроса:
Это мой код:
<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]);
Я бы посоветовал вам иметь другое состояние для отслеживания счетчиков всех вопросов.
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]);
Не могли бы вы дать мне свои item
данные? Это помогло бы мне лучше понять ваше дело @ZiaYamin
Я обновил свой вопрос. может быть больше вопросов. тут не один вопрос.
здесь, когда я использовал ваш код, когда я выбираю несколько вариантов, значение questionCounters
обновляется при каждом выборе, например 1,2,3,4,5
item.attributes.Number
это идентификатор вашего вопроса, верно? @ЗияЯмин
да, это мой идентификатор вопроса.
После этой строки {Object.keys(attributes?.options).map(item => (
не могли бы вы попробовать добавить <div className = "flex items-center h-5" key = "item">
и удалить <></>
тоже? @ЗияЯмин
Вот документ для него reactjs.org/docs/lists-and-keys.html#keys @ZiaYamin
Я добавил, так что делать дальше?
Не могли бы вы проверить мой обновленный код в ответе? Я немного изменил его, чтобы убедиться, что counter
состояние корректно обновляется с помощью questionCounters
состояния @ZiaYamin.
Спасибо, бро, теперь все работает правильно, огромное спасибо за то, что уделил время решению моей проблемы.
Не за что!~
Я использовал ваш код, когда я устанавливаю флажок в вопросе, он работает правильно, но если я выбираю два нескольких флажка в вопросе и снимаю их, первый увеличивается, а второй уменьшается, но если я выбрал 3 флажка, первый не увеличивает и не уменьшает, а второй увеличивает один и третий уменьшает один.