Reactjs 更新初始值Formik中的特定值

我正在对我的表单使用Formik和Yup验证，该表单包含firstname、lastname和username。用户名应该没有空格，所以我使用的是onChange事件和值。Yup验证适用于firstname和Lastname，但不适用于用户名。当记录我的值时，发现用户名没有更新。我是新手，请帮帮我。提前谢谢

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; 

constCustomTextInput=（{label，…props}）=>{
const[field，meta]=useField（props）；
返回(
{label}
{meta.moucted&&meta.error(
{meta.error}
)：null}
)
}
函数App（）{
常量[regnum，Setreg]=useState（“”）；
函数避免（e）{
Setreg（例如target.value.replace（/\s+/g'）；
}
返回(
{
设置超时（（）=>{
//我的api调用在这里
重置表单（）
设置提交（假）；
},2000)
}
}>
{props=>(
避免（事件）}占位符=“空格将被删除”/>
{props.isSubmitting？“加载…”：“提交”}
);
}
导出默认应用程序；

问题是，是否要阻止用户使用带有空格的用户名？如果是这样，最简单的方法是通过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处理程序到username，你就超越了formik，因为formik在引擎盖下使用它的onChange。在提交之前，在submitHandler中操纵数据，让formik做它该做的事情。

Setreg来自哪里？请显示Setreg的代码是我正在使用的状态，const[regnum，Setreg]=使用状态（“”）；@Vencovsky我有代码，你能帮我解决吗？我是一个反应新手，你能告诉我怎么做吗？当然，我只想从函数中完成事件。有没有办法操纵提交句柄中的数据？我已经更新了代码，你能告诉我有没有办法将此字段添加到提交处理程序中，以便提交前的错误是什么