Реакция: сброс группы переключателей пользовательского интерфейса материала в форме Formik не работает

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.

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
1
0
53
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Вы можете установить свойство 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 />}
    />
))}

Я также создал ДЕМО-ССЫЛКУ, чтобы легко просмотреть и протестировать ее.

Надеюсь, понятно и полезно

Да, это исправило ситуацию! Большое спасибо!

MatterOfFact 21.06.2024 20:10

Я рад это слышать. Пожалуйста!

Onur Doğan 21.06.2024 20:16

Другие вопросы по теме

Как создать универсальный крючок для извлечения данных в TypeScript для API с различными структурами ответов?
Можно ли надежно буферизовать исходящие POST-запросы из автономного React PWA?
Обертка с помощью React.StrictMode в Next.js
Как я могу создать переводчик, который конвертирует язык моего динамического сайта с английского на французский?
Использование NPM для создания приложения React: СЕРЬЕЗНОЕ ИЗМЕНЕНИЕ: webpack <5 используется для включения полифилов для основных модулей node.js по умолчанию. Это уже не так
Как смоделировать функцию внутри компонента реагирования с помощью Jest?
Как передать состояние от дочернего компонента к родительскому в Next.js?
React Query – использовать ответ от выборки списка на setQueryData для каждого элемента?
Я не могу предварительно заполнить поля ввода в моей форме. Может кто-нибудь мне помочь?
Неверный вызов перехватчика при вызове функции