React+Formik表单输入值不更新：是否需修改TextInput组件？

你的问题出在自定义的TextInput组件上，三个关键问题导致Formik无法同步表单值：

1. input缺少name属性：Formik的handleChange依赖输入框的name属性匹配表单字段，组件没传这个属性的话，Formik不知道要更新哪个值
2. onChange传递错误：你把props.onChange包装后只传了e.target.value，但Formik的handleChange需要接收完整事件对象才能识别字段
3. input未绑定value：输入框没绑定父组件传入的value，变成非受控组件，输入内容不会同步到Formik的值里

修改后的TextInput组件 #

import React from "react";
import { BsInfoLg as InfoIcon } from "react-icons/bs";

const TextInput = (props) => {
  const isRequired = props.required;
  const infoText = props.info;
  return (
    <div className="form-control w-full max-w-xs">
      <label className="justify label">
        <div className="justify-start">
          <span className="mr-2 text-red-600">{isRequired ? "*" : null}</span>
          <span className="label-text">{props.label}</span>
        </div>
        {infoText ? (
          <div
            className="tooltip tooltip-top tooltip-secondary justify-end"
            data-tip={infoText}
          >
            <span className="badge badge-secondary justify-end">
              <InfoIcon></InfoIcon>
            </span>
          </div>
        ) : null}
      </label>
      <input
        name={props.name} // 新增：绑定字段名，和Formik初始值的key对应
        value={props.value} // 新增：绑定父组件传入的value，转为受控组件
        placeholder={props.children}
        className="input input-primary input-bordered "
        onChange={props.onChange} // 直接传递Formik的handleChange，无需包装
      />
    </div>
  );
};

export default TextInput;

修改ContactForm中TextInput的调用 #

每个TextInput都要添加name属性，值和Formik初始值的key一致：

// 示例：First Name的调用
<TextInput
  label="First Name"
  name="firstName" // 新增：对应Formik初始值里的firstName
  required
  value={formik.values.firstName}
  onChange={formik.handleChange}
>
  First name
</TextInput>

// Last Name同理
<TextInput
  label="Last Name"
  name="lastName"
  required
  value={formik.values.lastName}
  onChange={formik.handleChange}
>
  Last name
</TextInput>

额外提示 #

• 所有需要绑定Formik的输入组件都要添加正确的name属性
• "Confirm Email"输入框目前onChange设为null，后续若要做校验，记得绑定对应字段和处理函数

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