[英]Displaying errors simultaneously writing in an input
我一直在使用 Yup 和 Formik 在 React 中进行表单验证。 现在,当用户模糊输入时,会显示错误。 这是我的代码:aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
import React from "react";
import { Formik, Field } from "formik";
import TextField from "@material-ui/core/TextField";
import Typography from "@material-ui/core/Typography";
import * as yup from "yup";
const FirstNameInputComponent = ({ field, ...props }) => {
const { errorMessage, touched } = props;
const { name, value, onChange, onBlur } = field;
return (
<TextField
value={value}
name={name}
error={touched && errorMessage ? true : false}
label="نام"
helperText={touched && errorMessage ? errorMessage : undefined}
onChange={onChange}
onBlur={onBlur}
/>
);
};
const App = () => {
const validationSchema = yup.object().shape({
first_name: yup.string().required()
});
return (
<Formik
initialValues={{
file: undefined,
text: undefined
}}
validationSchema={validationSchema}
validateOnBlur={true}
render={({
values,
errors,
touched,
handleChange,
handleBlur,
setFieldValue
}) => {
return (
<form>
<Field
name="first_name"
component={FirstNameInputComponent}
errorMessage={errors["first_name"]}
touched={touched["first_name"]}
onChange={handleChange}
onBlur={handleBlur}
/>
</form>
/>
);
}
如何在用户写入输入的同时显示错误?
假设它应该是 0 < foo < 10。
const [foo, setFoo] = useState(1);
const [errMsg, setErrMsg] = useState('');
// declare schema with Yup
const schema = Yup.object().shape({
num: Yup.number()
.min(1, 'min')
.max(9, 'max'),
});
// in input change handler
const onInputChange = val => {
schema
.validate({
num: val,
})
.then(() => {
setFoo(val);
setErrMsg('');
})
.catch(() => {
setFoo(val); // comment this out if you don't want to set the value when there's an error
setErrMsg('Number must be between 1 and 10');
});
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.