Formik中Password输入框值无法随onChange更新的问题排查

问题根源 #

你的密码输入框id设置为"pass"，但Formik的initialValues中对应的字段是password。Formik的handleChange默认通过输入框的name或id属性识别要更新的字段，二者不匹配时，Formik无法定位到目标字段进行更新。

修复方案 #

有两种方式可以解决这个问题：

方案1：修改输入框id与字段名一致

将密码输入框的id改为"password"，和Formik定义的字段名保持统一：

<CustomInput
  value={formik.values.password}
  onChange={(e) => {
    console.log("change password");
    formik.handleChange(e);
    setErrMsg("");
  }}
  labelText="Password"
  id="password" {/* 此处修改为password */}
  inputProps={{
    type: "password",
    endAdornment: (
      <InputAdornment position="end">
        <Icon className={classes.inputIconsColor}>lock_outline</Icon>
      </InputAdornment>
    ),
  }}
/>

方案2：为输入框添加name属性

在inputProps中添加name="password"，Formik会优先读取name属性来匹配字段：

<CustomInput
  value={formik.values.password}
  onChange={(e) => {
    console.log("change password");
    formik.handleChange(e);
    setErrMsg("");
  }}
  labelText="Password"
  id="pass"
  inputProps={{
    name: "password", {/* 添加name属性 */}
    type: "password",
    endAdornment: (
      <InputAdornment position="end">
        <Icon className={classes.inputIconsColor}>lock_outline</Icon>
      </InputAdornment>
    ),
  }}
/>

原理说明 #

Formik的handleChange函数会从事件目标元素中提取name或id值，以此作为键去更新formik.values中的对应字段。你的邮箱输入框id与字段名email一致，所以能正常更新；而密码输入框的id与字段名不匹配，导致Formik无法识别要更新的字段，因此formik.values.password没有变化。

内容的提问来源于stack exchange，提问作者Ahmed Sbai