如何从子组件向父组件获取状态？拆分式表单的状态收集及实现方案合理性分析

Great question! Let's break this down step by step for your form scenario where input/select elements are wrapped into separate components, with only the submit button directly in the <form> tag.

1. Collecting Child Component State & Handling Submission #

There are a few reliable patterns to gather state from your custom form components and submit it when the button is clicked:

Option 1: Controlled Components with Parent State (Most Common) #

This is the standard React approach. The parent form component maintains all the form state, and passes down value and an onChange handler to each child component. The child components update the parent's state whenever their value changes, so the parent always has the latest data ready for submission.

Example Code:
Parent Form Component:

import { useState } from 'react';
import InputComp1 from './InputComp1';
import InputComp2 from './InputComp2';
import Select1 from './Select1';
import Select2 from './Select2';

function RegistrationForm() {
  const [formData, setFormData] = useState({
    input1: '',
    input2: '',
    select1: '',
    select2: ''
  });

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

  const handleSubmit = (e) => {
    e.preventDefault();
    // Here you can submit formData to your API or process it
    console.log('Submitting:', formData);
  };

  return (
    <form onSubmit={handleSubmit}>
      <InputComp1 
        value={formData.input1} 
        onChange={(val) => handleChange('input1', val)} 
      />
      <InputComp2 
        value={formData.input2} 
        onChange={(val) => handleChange('input2', val)} 
      />
      <Select1 
        value={formData.select1} 
        onChange={(val) => handleChange('select1', val)} 
      />
      <Select2 
        value={formData.select2} 
        onChange={(val) => handleChange('select2', val)} 
      />
      <button type='submit'>Register</button>
    </form>
  );
}

Child Component (e.g., InputComp1):

function InputComp1({ value, onChange }) {
  return (
    <input
      type="text"
      value={value}
      onChange={(e) => onChange(e.target.value)}
      // Add any custom logic, validation, or UI here
    />
  );
}

Option 2: Context API for Deeply Nested Components #

If your form has deeply nested components (or you want to avoid "props drilling" when you have many fields), you can use React Context to share the form state and update functions across all child components.

You'd create a FormContext, wrap your form in a Provider that holds the state, and each child component consumes the context to update values. This keeps the parent component clean, especially for large forms.

Option 3: Uncontrolled Components with Refs (Less Recommended) #

You can use React refs to access the DOM elements directly in child components. For custom components, you'd use useImperativeHandle to expose a method that returns the current value. Then the parent can call these methods on submit to collect all values.

This approach is less ideal because it moves state out of React's control, making it harder to handle validation or dynamic updates, but it's an option for simple cases.

2. Is Splitting Form Elements into Components Reasonable? #

It depends on your use case—there's no one-size-fits-all answer:

When Splitting Makes Sense #

• Reusability: If you use the same input/select component across multiple forms (e.g., a custom email input with validation, a country select dropdown), splitting them into reusable components saves code and ensures consistency.
• Complex Logic: If a field has custom behavior (like real-time validation, masked input, or conditional UI), encapsulating that logic in a separate component keeps the parent form clean and easier to maintain.
• Large Forms: For forms with dozens of fields, breaking them into smaller, focused components makes the codebase more organized and easier to debug.

When a Single Component is Better #

• Simple Forms: If your form only has a few fields with no custom logic, keeping everything in the parent component avoids unnecessary abstraction and complexity.
• Tight Coupling: If all fields are highly interdependent (e.g., one field's value directly affects another's options), managing state in a single component can make it easier to handle those interactions without extra prop passing or context.

Final Takeaway #

Splitting form elements into components is absolutely reasonable when it improves reusability or maintainability. Pair it with a centralized state management approach (parent state or Context) to keep control over the form data. For small, simple forms, skip the split to keep things straightforward.

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