Mantine中Map渲染Input字段无交互问题求助

问题根源 #

你的表单字段无法交互，本质是FormBuilder组件中没有正确将Mantine表单的受控属性绑定到输入组件上，同时渲染时缺少唯一key导致组件复用异常。

具体修复步骤 #

1. 规范fields数组的结构 #

确保每个field的name严格匹配useForm定义的schema键，示例如下：

const fields = [
  { name: "username", label: "用户名", type: "text" },
  { name: "email", label: "邮箱", type: "email" },
  { name: "password", label: "密码", type: "password" },
];

2. 修正FormBuilder的组件渲染逻辑 #

修改FormBuilder，针对不同输入类型正确传递表单props，同时给每个组件添加唯一key：

import { TextInput, EmailInput, PasswordInput } from "@mantine/core";
import { useForm } from "@mantine/form";

type Field = {
  name: string;
  label: string;
  type: "text" | "email" | "password";
};

type FormBuilderProps = {
  fields: Field[];
  form: ReturnType<typeof useForm>;
};

export function FormBuilder({ fields, form }: FormBuilderProps) {
  return (
    <>
      {fields.map((field) => {
        const inputProps = form.getInputProps(field.name);
        switch (field.type) {
          case "text":
            return (
              <TextInput
                key={field.name}
                label={field.label}
                {...inputProps}
                mb="md"
              />
            );
          case "email":
            return (
              <EmailInput
                key={field.name}
                label={field.label}
                {...inputProps}
                mb="md"
              />
            );
          case "password":
            return (
              <PasswordInput
                key={field.name}
                label={field.label}
                {...inputProps}
                mb="md"
              />
            );
          default:
            return null;
        }
      })}
    </>
  );
}

3. 父组件正确传递表单实例 #

在父组件中，确保useForm的初始值、验证规则与fields数组对应，并正确绑定提交事件：

import { useForm } from "@mantine/form";
import { Button, Container } from "@mantine/core";
import { FormBuilder } from "./FormBuilder";

export default function App() {
  const form = useForm({
    initialValues: {
      username: "",
      email: "",
      password: "",
    },
    validate: {
      username: (val) => val.length < 3 ? "用户名至少3个字符" : null,
      email: (val) => /^\S+@\S+$/.test(val) ? null : "请输入有效邮箱",
      password: (val) => val.length < 6 ? "密码至少6位" : null,
    },
  });

  return (
    <Container mt={40}>
      <form onSubmit={form.onSubmit((values) => console.log("提交值:", values))}>
        <FormBuilder fields={fields} form={form} />
        <Button type="submit" disabled={!form.isValid()}>提交</Button>
      </form>
    </Container>
  );
}

const fields = [
  { name: "username", label: "用户名", type: "text" },
  { name: "email", label: "邮箱", type: "email" },
  { name: "password", label: "密码", type: "password" },
];

验证效果 #

修复后可实现：

• 输入字段正常进行输入、编辑交互
• 实时触发表单验证规则并显示错误提示
• 父组件通过提交事件获取完整表单值
• 利用表单状态（如isValid）控制提交按钮可用性

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