React Mantine模态框中如何从子组件向父组件传递表单数据？

核心问题分析 #

原代码存在两个关键问题：

1. StudentForm的Form组件onSubmit直接执行了props.modaltoblock()，会导致组件渲染时就触发函数，而非表单提交时
2. 子组件未收集输入值，无法将数据传递给父组件

解决方案步骤 #

1. 改造子组件StudentForm：收集并传递表单数据 #

推荐使用Mantine官方的useForm钩子管理表单状态，更适配Mantine的Form组件：

import { Container, Title, Form, TextInput } from '@mantine/core';
import { useForm } from '@mantine/form';

export default function StudentForm(props) {
  // 初始化表单状态，定义需要收集的字段
  const form = useForm({
    initialValues: {
      name: '',
      age: '',
      className: ''
      // 按需添加其他输入字段
    }
  });

  const handleSubmit = (values) => {
    // 将表单数据传递给父组件的modaltoblock函数
    props.modaltoblock(values);
  };

  return (
    <Container> 
      <Title>Input Data for :</Title>
      <Form
        {...form}
        onSubmit={handleSubmit}
        mt="md"
      >
        {/* 示例输入字段，根据需求修改 */}
        <TextInput
          label="学生姓名"
          placeholder="请输入姓名"
          {...form.getInputProps('name')}
        />
        <TextInput
          label="年龄"
          placeholder="请输入年龄"
          type="number"
          {...form.getInputProps('age')}
          mt="sm"
        />
        <TextInput
          label="班级"
          placeholder="请输入班级"
          {...form.getInputProps('className')}
          mt="sm"
        />
      </Form>
    </Container>
  );
}

2. 改造父组件：接收并处理子组件传递的数据 #

修改modaltoblock函数接收数据参数，同时用状态存储表单数据，配合模态框的确认逻辑处理：

import { useState } from 'react';
import { modals, notifications } from '@mantine/core';
import StudentForm from './StudentForm';

// 父组件内部代码
const [formData, setFormData] = useState(null);

const modaltoblock = (data) => {
  // 接收子组件传递的表单数据，存入父组件状态
  setFormData(data);
  console.log('收到表单数据：', data);
};

const openModal = () => modals.openConfirmModal({
  title: 'Input Data',
  children: <StudentForm modaltoblock={modaltoblock} />,
  labels: { confirm: 'Confirm', cancel: 'Cancel'},
  onCancel: () => {
    console.log('Cancel');
    setFormData(null); // 取消时清空状态
  },
  onConfirm: () => {
    if (!formData) {
      notifications.show({
        title: '错误',
        message: '请先填写表单',
        color: 'red',
        autoClose: 1000
      });
      return;
    }
    // 这里可以添加数据处理逻辑，比如提交到后端
    console.log('确认处理数据：', formData);
    notifications.show({
      title: 'Input Submitted',
      message: 'Trial Complete',
      autoClose: 1000,
      withCloseButton: true
    });
    setFormData(null); // 处理完成后清空状态
  },
});

3. 关键细节说明 #

• 避免直接调用函数：原代码中onSubmit={props.modaltoblock()}会立即执行函数，正确写法是传递函数引用或封装处理函数
• Mantine useForm优势：自动处理表单验证、状态管理、输入绑定，比原生useState更高效
• 数据传递逻辑：子组件提交表单时传递数据到父组件，父组件用状态暂存数据，在模态框确认时完成最终处理

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