如何解决更新初始值格式中的特定值
我正在对具有名字,姓氏和用户名的表单使用Formik和Yup验证。用户名不应包含空格,因此我正在使用onChange事件和值。 Yup验证适用于名字和姓氏,但不适用于用户名。记录我的值时,发现用户名没有更新。我是新手,请帮帮我。预先感谢。
const CustomTextInput =({label,...props}) =>{
const [field,meta] = useField(props);
return(
<>
<label className="required" htmlFor={props.id || props.name}>{label}</label>
{meta.touched && meta.error ? (
<div className="error">{meta.error}</div>
):null}
<input className="text-input" {...field} {...props}/>
</>
)
}
function App(){
const [regnum,Setreg]= useState("");
function avoid(e){
Setreg(e.target.value.replace(/\s+/g,''));
}
return(
<Styles>
<Formik
initialValues={{
firstname:'',lastname: '',username:'',phone1:'',email:''
}}
validationSchema={
Yup.object({
firstname: Yup.string()
.required('Required'),lastname: Yup.string()
.required('Required'),username: Yup.string()
.min(4,"Username should be greater than 4 characters")
.max(15,"Wooah! Username cannot be that big")
.required('Required'),})
}
onSubmit= {(values,{ setSubmitting,resetForm }) => {
setTimeout(()=> {
//My api call here
resetForm()
setSubmitting(false);
},2000)
}
}>
{props => (
<Form>
<CustomTextInput label="First Name" name="firstname" type="text" placeholder="first Name"/>
<CustomTextInput label="Last Name" name="lastname" type="text" placeholder="Last Name"/>
<CustomTextInput label="UserName" name="username" type="text" value={regnum} onChange={(event)=>avoid(event)} placeholder="Spaces will be removed"/>
<div>
<button type="submit" >{props.isSubmitting ? "Loading..." : "Submit"}</button>
</div>
</Form>
</Formik>
</Styles>
);
}
export default App;
解决方法
问题是,您是否要阻止用户使用带空格的用户名?如果是这样,最简单的方法就是通过yup。
validationSchema={
Yup.object({
firstname: Yup.string()
.required('Required'),lastname: Yup.string()
.required('Required'),username: Yup.string()
.required('Required').matches("/\s/","Cannot contain spaces"),})
}
否则,如果允许用户使用空格写用户名,但是出于任何原因都希望没有空格,则必须在submitHandler中处理数据。
通过为用户名提供自定义的onChange处理函数,您可以覆盖formik,因为formik在后台使用了onChange。在提交之前,在SubmitHandler中处理数据,让formik做到这一点。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。