React子组件提交与输入变更处理：LoginPage无法检测事件

Hey there! Let's figure out why your LoginPage isn't picking up form submissions or input changes. You’re on the right track with state lifting—let’s walk through the exact steps to get this working properly.

Since LoginPage is responsible for sending data to the server, it should hold the source of truth for form values and handle all events. Here's how to set that up:

import { useState } from 'react';
import LoginForm from './LoginForm';

function LoginPage() {
  // Store form values in parent state
  const [formData, setFormData] = useState({
    username: '',
    password: ''
  });

  // Handle input changes from the child form
  const handleInputChange = (e) => {
    const { name, value } = e.target;
    setFormData(prevState => ({
      ...prevState,
      [name]: value
    }));
    // Add this log to verify changes are detected
    console.log('Updated form data:', formData);
  };

  // Handle form submission
  const handleSubmit = (e) => {
    e.preventDefault(); // Stop browser from reloading the page
    // Now you have full access to the form data here!
    console.log('Form submitted with:', formData);
    // Add your server API call here, e.g.:
    // fetch('/api/login', {
    //   method: 'POST',
    //   body: JSON.stringify(formData),
    //   headers: { 'Content-Type': 'application/json' }
    // });
  };

  // Pass state and handlers to LoginForm as props
  return (
    <div className="login-page">
      <LoginForm
        formData={formData}
        onInputChange={handleInputChange}
        onSubmit={handleSubmit}
      />
    </div>
  );
}

export default LoginPage;

Your LoginForm should be a "dumb" component that just renders inputs and forwards events to the parent. Make sure each input is a controlled component linked to the parent's state:

function LoginForm({ formData, onInputChange, onSubmit }) {
  return (
    <form onSubmit={onSubmit}> {/* Attach the parent's submit handler here */}
      <div>
        <label htmlFor="username">Username:</label>
        <input
          type="text"
          id="username"
          name="username" // Critical: matches the key in formData
          value={formData.username} // Link to parent state
          onChange={onInputChange} // Forward change event to parent
        />
      </div>
      <div>
        <label htmlFor="password">Password:</label>
        <input
          type="password"
          id="password"
          name="password" // Critical: matches the key in formData
          value={formData.password} // Link to parent state
          onChange={onInputChange} // Forward change event to parent
        />
      </div>
      <button type="submit">Log In</button>
    </form>
  );
}

export default LoginForm;

If you’re still not seeing events trigger, these are the most common pitfalls:

• Forgot to pass props: Make sure you’re actually passing formData, onInputChange, and onSubmit from LoginPage to LoginForm.
• Mismatched name attributes: The name on each input must exactly match the keys in your formData state (e.g., username can’t be userName).
• Missing e.preventDefault(): Without this, the browser will refresh the page on submit, and you’ll lose all state.
• Uncontrolled inputs: If you don’t set value={formData.key}, the input won’t be linked to the parent state, so changes won’t propagate up.

Once you set this up, your LoginPage will detect every input change and form submission, giving you full control to send the data to your server.

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