React+Hooks动态表单实现及多表单分表提交问题求助

Hey there! Let's fix your dynamic form issue with React Hooks step by step. I'll cover generating dynamic fields, collecting their values into an array, and submitting static/dynamic data separately to your server.

Step 1: Set Up State for Dynamic Fields #

First, use useState to manage an array of dynamic form fields. Each field should have a unique ID (to track changes/deletions) and values for your inputs:

import { useState } from 'react';

function YourFormComponent() {
  // Static form state (you already have this working)
  const [staticData, setStaticData] = useState({
    username: '',
    email: ''
  });

  // Dynamic form state: array of field objects
  const [dynamicFields, setDynamicFields] = useState([
    { id: Date.now(), label: '', value: '' } // Initial field
  ]);

Step 2: Add Functions to Manage Dynamic Fields #

Create handlers to add new fields, remove existing ones, and update field values:

// Add a new dynamic field
  const addDynamicField = () => {
    setDynamicFields(prevFields => [
      ...prevFields,
      { id: Date.now(), label: '', value: '' } // Unique ID with timestamp
    ]);
  };

  // Remove a dynamic field by ID
  const removeDynamicField = (fieldId) => {
    setDynamicFields(prevFields => 
      prevFields.filter(field => field.id !== fieldId)
    );
  };

  // Update value of a specific dynamic field
  const handleDynamicInputChange = (fieldId, key, value) => {
    setDynamicFields(prevFields => 
      prevFields.map(field => 
        field.id === fieldId ? { ...field, [key]: value } : field
      )
    );
  };

Step 3: Render Dynamic Form Fields #

Loop through the dynamicFields array to render inputs and action buttons:

return (
    <form onSubmit={handleSubmit}>
      {/* Static Form Section (your existing code) */}
      <div className="static-form">
        <h3>Static Form</h3>
        <input
          type="text"
          placeholder="Username"
          value={staticData.username}
          onChange={(e) => setStaticData({...staticData, username: e.target.value})}
        />
        <input
          type="email"
          placeholder="Email"
          value={staticData.email}
          onChange={(e) => setStaticData({...staticData, email: e.target.value})}
        />
      </div>

      {/* Dynamic Form Section */}
      <div className="dynamic-form">
        <h3>Dynamic Fields</h3>
        {dynamicFields.map(field => (
          <div key={field.id} className="dynamic-field-group">
            <input
              type="text"
              placeholder="Field Label"
              value={field.label}
              onChange={(e) => handleDynamicInputChange(field.id, 'label', e.target.value)}
            />
            <input
              type="text"
              placeholder="Field Value"
              value={field.value}
              onChange={(e) => handleDynamicInputChange(field.id, 'value', e.target.value)}
            />
            <button type="button" onClick={() => removeDynamicField(field.id)}>
              Remove
            </button>
          </div>
        ))}
        <button type="button" onClick={addDynamicField}>
          Add New Field
        </button>
      </div>

      <button type="submit">Submit All Data</button>
    </form>
  );

Step 4: Submit Static and Dynamic Data Separately #

Create a submit handler that sends static data to one endpoint and dynamic data to another:

const handleSubmit = async (e) => {
    e.preventDefault();

    try {
      // Submit static data to your static table endpoint
      await fetch('/api/static-table', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(staticData)
      });

      // Submit dynamic data array to your dynamic table endpoint
      await fetch('/api/dynamic-table', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(dynamicFields)
      });

      alert('Both static and dynamic data submitted successfully!');
      // Reset form if needed
      setStaticData({ username: '', email: '' });
      setDynamicFields([{ id: Date.now(), label: '', value: '' }]);
    } catch (error) {
      console.error('Submission failed:', error);
      alert('Failed to submit data. Please try again.');
    }
  };
}

export default YourFormComponent;

Key Notes #

• Use unique IDs (like Date.now()) for dynamic fields instead of array indexes to avoid rendering bugs when adding/removing fields.
• Validate dynamic fields (e.g., check for empty values) before submission if required.
• Adjust the field structure (add more properties like type for input types) based on your actual form needs.

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