в общем проблема такова, у меня есть форма на React JS в модальном окне, реализованая через Material UI.
<RadioGroup aria-label="test" name="test" value={answer} onChange={handleChange}>
<FormControlLabel value={test.a1[0]} control={<Radio />} label={test.a1[0]} />
<FormControlLabel value={test.a1[1]} control={<Radio />} label={test.a1[1]} />
<FormControlLabel value={test.a1[2]} control={<Radio />} label={test.a1[2]} />
<FormControlLabel value={test.a1[3]} control={<Radio />} label={test.a1[3]} />
</RadioGroup>
В ней, как можно заметить, есть onChange
которая меняет state
const [answer, setAnswer] = useState("");
const handleChange = (e) => {
setAnswer(e.target.value)
}
И также, есть кнопочка, которая выполняет некоторую функцию handleSubmit
<Button type="submit" onClick={handleSubmit} color="primary">Submit</Button>
const handleSubmit = () => {
if (answer == "") {
alert("!")
} else {
qCount += 1
console.log(qCount)
}
}
Ну и так же есть переменная let qCount = 1
По логике, при выборе одного из вариантов формы и нажатии на кнопку Submit, qCount
должен увеличиться на 1 и вывестись в консоль.
Собственно в чём проблема, я выбираю один из вариантов, и нажимаю кнопку, всё идёт по плану и переменная увеличивается на 1, но стоит мне выбрать другой вариант и нажать кнопку снова, как счётчик обнуляется, и всё идёт сначала. То есть, пока одна метка radio активна, то кнопка работает, как только будет выбрана другая, счётчик обнуляется. Я думаю что в этом как то замешана функция handleChange
, но как именно понятия не имею.
Вопрос: Почему так и как это исправить?