formik.resetForm()
правильно сбрасывает значение, но группа переключателей Material UI не будет сброшена правильно: последний выбранный переключатель остается выбранным.
Как правильно сбросить группу переключателей после отправки?
import { useFormik } from "formik";
import {
Stack,
Button,
FormControl,
FormControlLabel,
FormGroup,
FormHelperText,
FormLabel,
Radio,
RadioGroup,
TextField,
} from "@mui/material";
export default function App() {
const players = ["player 1", "player 2"];
const formik = useFormik({
initialValues: {
winner: "",
},
onSubmit: (values, { resetForm }) => {
resetForm();
},
});
return (
<div className = "App">
<h1>Demo Radio Group Reset</h1>
<h2>
After pressing Save, the form will be reset, but the reset of the radio
group does not work.
</h2>
<p>value: {formik.values.winner || "<empty>"}</p>
<form onSubmit = {formik.handleSubmit}>
<Stack>
<FormControl
required
error = {formik.touched.winner && Boolean(formik.errors.winner)}
>
<FormLabel sx = {{ textAlign: "left" }}>Winner</FormLabel>
<RadioGroup
row
name = "winner"
onChange = {formik.handleChangeEvent}
onBlur = {formik.handleBlur}
>
{players.map((player) => (
<FormControlLabel
key = {player}
value = {player}
control = {<Radio />}
label = {player}
/>
))}
</RadioGroup>
<FormHelperText>
{formik.touched.winner && formik.errors.winner}
</FormHelperText>
</FormControl>
<Button variant = "contained" type = "submit">
Save
</Button>
</Stack>
</form>
</div>
);
}
См. пример выполнения на stackblitz.
Вы можете установить свойство checked
компонента FormControlLabel
, чтобы указать, что он должен отображаться отмеченным только в том случае, если formik имеет значение winner
и совпадает с плеером:
{players.map((player) => (
<FormControlLabel
key = {player}
value = {player}
label = {player}
// Check the selected one
checked = {formik.values.winner === player}
control = {<Radio />}
/>
))}
Я также создал ДЕМО-ССЫЛКУ, чтобы легко просмотреть и протестировать ее.
Надеюсь, понятно и полезно
Я рад это слышать. Пожалуйста!
Да, это исправило ситуацию! Большое спасибо!