[英]material ui slider component onChange event not working with Fromik handleChange event
初始formic 值由slider 获取,但Formik handleChange 事件不会更新slider 值
福米克 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));
},
});
具有 onChange 事件的材料 ui slider 组件,它获取初始 formik 值但不更新它
<Slider
name="slide"
id="slide"
valueLabelDisplay="auto"
aria-label="term slider"
defaultValue={formik.values.slide}
onChange={formik.handleChange}
min={1}
max={110}
/>
你可以使用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>
);
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.