Formik Field未触发onChange函数问题求助

我看了你的Formik代码，发现几个可能导致事件没触发的问题，咱们一步步梳理并解决：

首先纠正代码里的语法错误 #

1. initialValues={{ jobId:"45445"; }} 里的分号要改成逗号，不然会触发JS语法错误：

initialValues={{ jobId: "45445" }}

2. Field组件里的onKeyUp={handleChange}tried not working是语法错误，要把注释和代码分开写，比如改成onKeyUp={handleChange} {/* 之前尝试没生效 */}

为什么你的事件绑定没生效？ #

你可能混淆了Formik组件的onChange和字段级的onChange：

• Formik根组件的onChange prop不是监听单个输入框的输入事件，它的参数是当前表单的values对象，而不是事件对象，所以你之前写的onChange={(e) => console.log('onChage', e)}里的e其实是整个表单的值，不是输入事件，自然达不到预期效果。
• 直接把handleChange绑定到onKeyUp也不合适，handleChange是Formik用来处理输入框onChange事件的方法，虽然能拿到事件对象，但逻辑上应该分开处理不同事件。

正确的实现方式 #

方式一：在Field组件中绑定自定义事件（推荐） #

在Field组件里同时保留Formik的handleChange来更新表单值，再添加自定义的onChange/onKeyUp逻辑：

<Formik
  initialValues={{ jobId: "45445" }}
  onSubmit={(data, { setSubmitting }) => {
    setSubmitting(true);
    console.log(data);
    setSubmitting(false);
  }}
>
  {({ values, isSubmitting, handleChange, handleBlur, handleSubmit }) => (
    <Form>
      <Button type="submit">提交</Button>
      <Field
        name="jobId"
        label="Job ID"
        as={TextFieldOutLined}
        onChange={(e) => {
          // 先让Formik更新表单值
          handleChange(e);
          // 执行你的自定义操作
          console.log('onChange触发:', e.target.value);
        }}
        onKeyUp={(e) => {
          // 执行onKeyUp的自定义操作
          console.log('onKeyUp触发:', e.target.value);
        }}
      />
    </Form>
  )}
</Formik>

方式二：用useEffect监听表单值变化 #

如果你的操作是基于jobId的值变化而触发，而不是单纯监听事件，可以用useEffect监听values.jobId的变化：

<Formik
  initialValues={{ jobId: "45445" }}
  onSubmit={(data, { setSubmitting }) => {
    setSubmitting(true);
    console.log(data);
    setSubmitting(false);
  }}
>
  {({ values, isSubmitting, handleChange, handleBlur, handleSubmit }) => {
    // 监听jobId的值变化
    React.useEffect(() => {
      console.log('jobId已更新:', values.jobId);
      // 这里写你的业务逻辑
    }, [values.jobId]);

    return (
      <Form>
        <Button type="submit">提交</Button>
        <Field
          name="jobId"
          label="Job ID"
          as={TextFieldOutLined}
          onChange={handleChange}
          onBlur={handleBlur}
        />
      </Form>
    );
  }}
</Formik>

补充：关于Formik的onBlur #

你之前尝试在Field里绑定InputProps={{ onBlur: handleBlur }}没生效，是因为as={TextFieldOutLined}（应该是TextFieldOutlined？可能是笔误）的props传递方式，如果你用的是Material-UI的TextField，应该把onBlur直接传给Field组件，或者通过InputProps传递时要确保是正确的层级：

<Field
  name="jobId"
  label="Job ID"
  as={TextFieldOutlined}
  InputProps={{
    onBlur: handleBlur
  }}
/>

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