Python开发者学React：如何将表单数据POST到API端点并传递给submit_task？

Hey there! As someone who's made the switch from Python to React, I totally get how form handling can feel like a small hurdle when you're used to Python's straightforward request handling. Let's walk through exactly what you need to do, step by step.

Step 1: Track Form Data with Controlled Components (Recommended) #

React's preferred way to handle forms is with controlled components—where React state acts as the single source of truth for your form inputs. This makes it easy to build your request_data object as the user types.

Here's how to set this up in a functional component:

import { useState } from 'react';

function TaskForm() {
  // Initialize state to hold your form data (this will be your request_data)
  const [requestData, setRequestData] = useState({
    title: '',
    description: '',
    priority: 'medium' // Example default value
  });

  // Update state whenever an input changes
  const handleInputChange = (e) => {
    // Destructure the input's name and value from the event
    const { name, value } = e.target;
    // Update the state object without overwriting other fields
    setRequestData(prevData => ({
      ...prevData,
      [name]: value
    }));
  };

  // Your submit function (called when the button is clicked)
  const submitTask = async (data) => {
    try {
      // Send POST request to your API
      const response = await fetch('https://your-api-endpoint.com/tasks', {
        method: 'POST',
        // Tell the API we're sending JSON
        headers: {
          'Content-Type': 'application/json',
          // Add any auth headers here if your API requires them (e.g., Bearer tokens)
          // 'Authorization': `Bearer ${yourAuthToken}`
        },
        // Convert your requestData object to JSON
        body: JSON.stringify(data)
      });

      // Check if the request was successful
      if (!response.ok) {
        throw new Error(`Request failed with status: ${response.status}`);
      }

      // Parse the API's response
      const result = await response.json();
      console.log('Task submitted successfully:', result);
      
      // Optional: Reset the form after successful submission
      setRequestData({ title: '', description: '', priority: 'medium' });
    } catch (error) {
      console.error('Error submitting task:', error);
      // Add error handling here (e.g., show a user-friendly message)
    }
  };

  return (
    <div className="task-form">
      <input
        type="text"
        name="title" // Match this to the key in requestData
        value={requestData.title}
        onChange={handleInputChange}
        placeholder="Task title"
      />
      <textarea
        name="description" // Match this to the key in requestData
        value={requestData.description}
        onChange={handleInputChange}
        placeholder="Task description"
      />
      <select
        name="priority" // Match this to the key in requestData
        value={requestData.priority}
        onChange={handleInputChange}
      >
        <option value="low">Low</option>
        <option value="medium">Medium</option>
        <option value="high">High</option>
      </select>
      {/* Pass requestData directly to submitTask on click */}
      <button onClick={() => submitTask(requestData)}>Submit Task</button>
    </div>
  );
}

export default TaskForm;

Key Notes for Controlled Components: #

• Each input has a name attribute that matches the corresponding key in your requestData state. This lets the handleInputChange function update the correct field dynamically.
• The value of each input is tied directly to state—so the UI always reflects the current state of your form data.

Step 2: Alternative: Uncontrolled Components (For Simple Forms) #

If you're working with a super simple form and don't want to manage state for every input, you can use uncontrolled components with useRef to grab input values directly from the DOM:

import { useRef } from 'react';

function SimpleTaskForm() {
  // Create refs for each input
  const titleRef = useRef(null);
  const descriptionRef = useRef(null);

  const submitTask = async () => {
    // Build your request_data object from the ref values
    const requestData = {
      title: titleRef.current.value,
      description: descriptionRef.current.value
    };

    // Same POST logic as before
    try {
      const response = await fetch('https://your-api-endpoint.com/tasks', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(requestData)
      });

      if (!response.ok) throw new Error(`Status: ${response.status}`);
      const result = await response.json();
      console.log('Success:', result);
      
      // Reset the form
      titleRef.current.value = '';
      descriptionRef.current.value = '';
    } catch (err) {
      console.error('Error:', err);
    }
  };

  return (
    <div>
      <input ref={titleRef} type="text" placeholder="Task title" />
      <textarea ref={descriptionRef} placeholder="Task description" />
      <button onClick={submitTask}>Submit Task</button>
    </div>
  );
}

When to Use Uncontrolled Components: #

• For very basic forms where you don't need real-time validation or dynamic updates based on input values.
• When integrating with non-React libraries that manipulate form inputs directly.

Final Tips #

• Always validate your form data before sending it to the API! Add checks for required fields, valid formats, etc., inside submitTask or handleInputChange.
• If your API uses form-data instead of JSON, replace the Content-Type header with multipart/form-data and use a FormData object instead of JSON.stringify(data).

内容的提问来源于stack exchange，提问作者death and gravity