材料 ui slider 组件 onChange 事件不适用于 Fromik handleChange 事件

Question

The initial formic value is taken by the slider but Formik handleChange event not update the slider value

Formik function

const formik = useFormik({
        initialValues: {
            slide: 50,
        },
        validationSchema: Yup.object({
            slide: Yup.number()
                .min(100, 'must be grater than 100'),
        }),
        onSubmit: values => {
            alert(JSON.stringify(values, null, 2));
        },
    });

material ui slider component with onChange event, it get initial formik value but not update it

<Slider
    name="slide"
    id="slide"
    valueLabelDisplay="auto"
    aria-label="term slider"
    defaultValue={formik.values.slide}
    onChange={formik.handleChange}
    min={1}
    max={110}
  />

Please check the codesandbox sample

Answer 1

you can use setFieldValue :

import React from "react";
import "./styles.css";
import Slider from "@material-ui/core/Slider";
import { useFormik } from "formik";
import * as Yup from "yup";
import Button from "@material-ui/core/Button";
import { Formik } from "formik";

export default function App() {
  return (
    <div>
      <Formik
        initialValues={{ slide: 50 }}
        validationSchema={Yup.object({
          slide: Yup.number().min(50, "must be grater than 100")
        })}
        onSubmit={(values, { setSubmitting }) => {
          setTimeout(() => {
            alert(JSON.stringify(values, null, 2));
            setSubmitting(false);
          }, 400);
        }}
      >
        {({
          values,
          errors,
          touched,
          handleChange,
          handleBlur,
          handleSubmit,
          isSubmitting,
          setFieldValue
          /* and other goodies */
        }) => (
          <form onSubmit={handleSubmit}>
            <Slider
              name="slide"
              id="slide"
              valueLabelDisplay="auto"
              aria-label="term slider"
              value={values.slide}
              onChange={(e, v) => {
                setFieldValue('slide', v);
              }}
              min={1}
              max={110}
            />
            {errors.slide && touched.slide && errors.slide}
            <button type="submit" disabled={isSubmitting}>
              Submit
            </button>
          </form>
        )}
      </Formik>
    </div>
  );
}