Formik value为undefined，修改字段无法获取数据，提交取不到TextField与Select输入值

问题核心原因 #

你完全没有正确使用Formik的状态托管能力，同时存在表单绑定、事件写法、属性冲突等多处错误。

具体错误点 #

• 额外使用自定义useState维护表单字段状态，和Formik内置的状态管理完全脱节，Formik本身就会自动托管所有表单值，不需要自己单独定义状态
• initialValues定义的字段key和表单组件的name属性完全不匹配，Formik依靠name属性对应状态中的字段，绑定失效
• 多个组件重复定义name属性，属性值冲突
• 自定义的onChange事件写法错误：渲染时就直接执行了回调函数而非触发事件时执行，且回调内部获取值的逻辑错误，拿到的是未定义的name变量而非用户输入值
• 组件的value没有绑定Formik提供的values对应字段，而是绑定了自定义的useState变量，状态完全割裂

修正后代码 #

// 完全删除自定义的useState和对应的自定义change事件，不需要这些
const handleSubmit= async(valuesToSubmit) => {
  console.log("valuesToSubmit: ", valuesToSubmit)
}

// ............
<Formik
  initialValues={{ 
    strdatefrom: "2017-05-24", // 初始值直接写在这里，不需要额外存state
    strdateto: "2017-05-24",
    intuserauthorid: "",
    intfmdocumentclassificationsid: selecteddocClassification,
    intlimit:"100",
    intoffset:"0"
  }}
  onSubmit={(values) =>{ 
    console.log("submit"); 
    handleSubmit(values)
  }}
>
{({ handleChange, handleBlur, handleSubmit, values, errors, isValid,touched,setFieldValue }) => (
  <form onSubmit={handleSubmit}> {/* 必须包裹form标签绑定提交事件 */}
    <Grid container>
      <Grid xs={12} className={classes.grid}>
        <TextField
          id="date-from"
          label="Date from"                  
          type="date"
          name="strdatefrom" // 要和initialValues里的key完全一致
          onChange={handleChange} // 直接用Formik内置的handleChange
          value={values.strdatefrom} // 绑定Formik托管的value
          className={classes.textField}
          InputLabelProps={{ shrink: true }} // 日期组件需要加这个避免label重叠
        />
      </Grid>
      <Grid xs={12} className={classes.grid}>
        <TextField
          id="date-to"
          label="Date to"
          type="date"
          name="strdateto" // 和initialValues的key一致
          onChange={handleChange}
          value={values.strdateto}
          className={classes.textField}
          InputLabelProps={{ shrink: true }}
        />
      </Grid>
      <Grid xs={12} className={classes.grid}>
        <FormControl variant="outlined" className={classes.formControl}>
          <InputLabel htmlFor="author-select">Author</InputLabel>
          <Select
            name="intuserauthorid" // 和initialValues的key一致
            value={values.intuserauthorid}
            onChange={handleChange}
            label="Author"
            inputProps={{ id: 'author-select' }}
          >
            {users}
          </Select>
        </FormControl>
      </Grid>
      {/* 加提交按钮触发提交事件 */}
      <Grid xs={12}>
        <Button type="submit" variant="contained">提交</Button>
      </Grid>
    </Grid>
  </form>
)}
</Formik>

修正说明 #

• 所有字段状态完全交给Formik托管，不需要自己写useState和自定义change事件
• 表单组件的name必须和initialValues中定义的key完全一致，才能正确绑定状态
• 用Formik提供的handleChange处理输入变更，自动同步状态到values中
• 必须用form标签包裹所有表单元素，并且绑定Formik的handleSubmit事件，点击type="submit"的按钮就会触发onSubmit回调，拿到所有表单值

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