材质ui滑块组件onChange事件不适用于Fromik handleChange事件答案

【问题标题】：material ui slider component onChange event not working with Fromik handleChange event材质ui滑块组件onChange事件不适用于Fromik handleChange事件
【发布时间】：2020-09-16 15:34:55
【问题描述】：

formik的handleChange事件不更新滑块值

Formik 函数

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));
        },
    });

带有onChange事件的材质ui滑块组件，它获取初始formik值但不更新它

<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

【问题讨论】：

当 mouseup 发生且用户已完成滑块调整时，通过 Slider 组件 onCommittedChange 属性更新 formik 可能更合适。

标签： reactjs material-ui formik yup

【解决方案1】：

你可以使用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>
  );
}

【讨论】：