React自定义表单处理Hook useForm输入框输入即失焦问题求助

数据老陈

2026-9-25

问题根源

核心原因是你在fields.map遍历渲染InputGroup时，使用了动态生成的随机值作为key属性。每次输入触发values状态更新后，Form组件会重渲染，此时每一个InputGroup的key都会生成全新的值，React会判定所有表单项都是新组件，直接销毁旧组件并挂载新组件，自然就会出现输入框失焦的情况。
次要问题：你给InputGroup传递的value是整个values对象，而非对应字段的取值，会导致输入框绑定值错误。

解决方案

删除动态生成随机id的逻辑，使用每个表单项唯一固定的name属性作为key
给每个InputGroup传递对应字段的value：values[field.name]

修正后的Form.js代码

import InputGroup from "./InputGroup";
import useForm from "./useForm";
const Form = () => {
  const fields = [
    {
      label: "First Name",
      className: "input-group",
      name: "firstName",
      placeholder: "John",
      type: "text"
    },
    {
      label: "Last Name",
      className: "input-group",
      name: "lastName",
      placeholder: "Doe",
      type: "text"
    },
    {
      label: "Email",
      className: "input-group",
      name: "email",
      placeholder: "JohnDoe@example.com",
      type: "email"
    },
    {
      label: "Phone Number",
      className: "input-group",
      name: "Phone",
      placeholder: "+234 (0)81 234 5678",
      type: "text"
    },
    {
      label: "Comments",
      className: "input-group",
      name: "comment",
      placeholder: "Message",
      type: "textarea"
    }
  ];

  const { values, handleChange, handleSubmit } = useForm();

  return (
    <form onSubmit={handleSubmit}>
      {fields.map((field) => (
        <InputGroup
          key={field.name}
          value={values[field.name] || ''}
          onChange={handleChange}
          {...field}
        />
      ))}
      <button>submit</button>
    </form>
  );
};

export default Form;