React表单开发：如何从嵌套组件中获取状态对象？

当你把表单字段拆分为独立组件后，除了通过传递更新函数提升状态到父组件，还有几种更适合不同场景的方案：

1. 使用 useRef + forwardRef 直接获取子组件状态 #

这种方式不需要将子组件状态提升到父组件，而是通过Ref让父组件直接调用子组件暴露的方法获取状态，适合简单的单个子组件场景。

子组件（FileInput）： #

import { forwardRef, useRef, useImperativeHandle } from 'react';

const FileInput = forwardRef((props, ref) => {
  const fileInputRef = useRef(null);
  
  // 向父组件暴露获取文件的方法
  useImperativeHandle(ref, () => ({
    getSelectedFile: () => fileInputRef.current?.files[0]
  }));

  return <input type="file" ref={fileInputRef} {...props} />;
});

export default FileInput;

父组件（FormComponent）： #

import { useRef } from 'react';
import FileInput from './FileInput';

const FormComponent = () => {
  const fileInputRef = useRef(null);

  const handleSubmit = (e) => {
    e.preventDefault();
    const selectedFile = fileInputRef.current?.getSelectedFile();
    console.log('提交的文件:', selectedFile);
    // 执行提交逻辑
  };

  return (
    <form onSubmit={handleSubmit}>
      <FileInput ref={fileInputRef} />
      <button type="submit">提交</button>
    </form>
  );
};

export default FormComponent;

注意：这种方式打破了React单向数据流，过度使用会增加组件耦合度，仅推荐用于简单场景。

2. 使用Context统一管理表单状态 #

如果表单包含多个独立字段组件，用Context可以避免层层传递更新函数，让所有子组件直接和全局表单状态交互，适合中大型表单。

第一步：创建表单Context #

import { createContext, useContext, useState } from 'react';

const FormContext = createContext();

export const FormProvider = ({ children }) => {
  const [formState, setFormState] = useState({
    file: null,
    // 可添加其他表单字段
  });

  const updateFormField = (fieldName, value) => {
    setFormState(prev => ({ ...prev, [fieldName]: value }));
  };

  return (
    <FormContext.Provider value={{ formState, updateFormField }}>
      {children}
    </FormContext.Provider>
  );
};

export const useFormContext = () => useContext(FormContext);

子组件（FileInput）： #

import { useFormContext } from './FormContext';

const FileInput = () => {
  const { updateFormField } = useFormContext();

  const handleFileChange = (e) => {
    updateFormField('file', e.target.files[0]);
  };

  return <input type="file" onChange={handleFileChange} />;
};

export default FileInput;

父组件（FormComponent）： #

import { FormProvider, useFormContext } from './FormContext';
import FileInput from './FileInput';

const FormComponent = () => {
  const handleSubmit = (e) => {
    e.preventDefault();
    const { formState } = useFormContext();
    console.log('表单状态:', formState);
    // 执行提交逻辑
  };

  return (
    <FormProvider>
      <form onSubmit={handleSubmit}>
        <FileInput />
        <button type="submit">提交</button>
      </form>
    </FormProvider>
  );
};

export default FormComponent;

3. 使用专业表单库（如React Hook Form/Formik） #

如果表单逻辑复杂（包含验证、动态字段等），直接使用成熟的表单库能大幅减少手动状态管理的代码，提升开发效率。

以React Hook Form为例：

父组件（FormComponent）： #

import { useForm } from 'react-hook-form';
import FileInput from './FileInput';

const FormComponent = () => {
  const { register, handleSubmit } = useForm();

  const onSubmit = (formData) => {
    console.log('提交的表单数据:', formData);
    // 执行提交逻辑
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <FileInput {...register('file')} />
      <button type="submit">提交</button>
    </form>
  );
};

export default FormComponent;

子组件（FileInput）： #

const FileInput = ({ register }) => {
  return <input type="file" {...register} />;
};

export default FileInput;

方案选型建议 #

• 小型表单：状态提升（你原本了解的传递更新函数）或useRef方案，状态提升更符合React单向数据流原则
• 中大型表单：Context方案，减少props传递，降低组件耦合
• 复杂表单：优先使用专业表单库，节省开发时间并避免重复造轮子

内容的提问来源于stack exchange，提问作者Łukasz Strzelecki