React+Formik复用组件时输入值无法同步至控制台的问题求助

问题描述 #

使用React + Formik构建表单时，封装的全局TextInput组件无法与Formik的firstName字段同步，输入内容时控制台无法记录值的变化，父组件与子组件间的value传递存在异常。

问题根源 #

1. 自定义TextInput组件中，input元素错误使用onClick事件而非onChange事件，无法监听输入内容的变化；
2. 调用父组件传递的onChange时未传递事件对象，导致Formik的handleChange无法识别目标字段并更新值；
3. 父组件中存在网格布局类名拼写错误（md:grid-cold-2应为md:grid-cols-2），且Formik配置缺少onSubmit处理函数；
4. 两个组件均未导出，导致组件无法正常导入使用。

修复方案 #

1. 修改TextInput.jsx组件 #

将input的onClick替换为onChange，并传递事件对象给父组件的回调，同时添加组件导出：

import React from "react";
const TextInput = (props) => {
  const isRequired = props.required;
  const infoText = props.info;
  return (
    <div>
      <input
        placeholder={props.children}
        className="input input-primary input-bordered"
        id={props.id}
        value={props.value}
        onChange={(e) => props.onChange(e)}
      />
    </div>
  );
};

export default TextInput;

2. 修正ContactForm.jsx组件 #

补充Formik的onSubmit函数，修正网格类名拼写错误，添加组件导出：

import React from "react";
import { useFormik } from "formik";
import TextInput from "../../shared/components/UIElements/TextInput";

const ContactForm = () => {
  const formik = useFormik({
    initialValues: {
      firstName: "",
    },
    onSubmit: (values) => {
      console.log("表单提交值：", values);
    },
  });
  console.log("当前Formik状态：", formik);

 return (
    <form onSubmit={formik.handleSubmit}>
      <div className="px-6 w-[700px]">
        <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
          <TextInput
            label="First Name"
            id="firstName"
            value={formik.values.firstName}
            onChange={formik.handleChange}
          >
            First name
          </TextInput>
          <div className="col-span-2 m-auto">
            <button
              className="btn btn-primary w-32 align-middle"
              type="submit"
            >
              Submit
            </button>
          </div>
        </div>
      </div>
    </form>
  );
};

export default ContactForm;

关键说明 #

• Formik的handleChange依赖事件对象的target.id或target.name来定位要更新的字段，因此必须传递事件参数；
• 输入框的内容变化必须通过onChange事件监听，onClick仅在点击元素时触发，无法响应输入行为；
• 组件必须通过export default导出，才能在其他文件中导入使用。

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