ReactJS调用ASP.NET Rest Service新手求助：登录表单对接问题

Hey there! As someone new to React and API calls, let's turn that static login form into a fully functional component that authenticates users against your backend service. Here's what you need to do:

Step 1: Convert Your Form to a React Controlled Component #

React works best when you manage form inputs with component state instead of relying on the DOM directly. First, we'll use the useState hook to track the email and password values:

import { useState } from 'react';

function LoginForm() {
  // State to track form inputs
  const [formData, setFormData] = useState({
    email: '',
    password: ''
  });

  // Handle input changes to sync with state
  const handleInputChange = (e) => {
    const { name, value } = e.target;
    setFormData(prev => ({ ...prev, [name]: value }));
  };

  // We'll add the submit handler next
  const handleSubmit = async (e) => {
    e.preventDefault(); // Stop the default page-reload form submission
    // API call logic goes here
  };

  return (
    <form onSubmit={handleSubmit}>
      <div className="form-group">
        <label htmlFor="email">Email:</label>
        <input
          type="email"
          className="form-control"
          id="email"
          placeholder="Enter email"
          name="email"
          value={formData.email}
          onChange={handleInputChange}
          required
        />
      </div>
      <div className="form-group">
        <label htmlFor="password">Password:</label>
        <input
          type="password"
          className="form-control"
          id="password"
          placeholder="Enter password"
          name="password"
          value={formData.password}
          onChange={handleInputChange}
          required
        />
      </div>
      <button type="submit" className="btn btn-primary">Login</button>
    </form>
  );
}

export default LoginForm;

Note: We swapped class for className (React's alternative to HTML class attributes) and for for htmlFor on the label—these are React-specific syntax rules you'll need to follow.

Step 2: Add the API Call Logic #

Now let's implement the API call inside the handleSubmit function. We'll start with the browser's built-in fetch API (no extra packages needed):

const handleSubmit = async (e) => {
  e.preventDefault();
  try {
    const response = await fetch('YOUR_WEB_SERVICE_LOGIN_URL', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify(formData), // Send email/password as JSON
    });

    if (!response.ok) {
      throw new Error('Login failed. Please check your credentials.');
    }

    const data = await response.json();
    // Assuming the API returns an access token on success
    localStorage.setItem('accessToken', data.accessToken);
    // Redirect to your protected page (use react-router if you have it set up)
    window.location.href = '/dashboard';
  } catch (error) {
    // Show error feedback to the user
    alert(error.message);
    // For a better UX, you could also update state to render an error component
    // setError(error.message);
  }
};

If you prefer using axios (a popular, user-friendly HTTP client), install it first with npm install axios, then rewrite the call like this:

import axios from 'axios';

// Inside handleSubmit:
try {
  const response = await axios.post('YOUR_WEB_SERVICE_LOGIN_URL', formData);
  localStorage.setItem('accessToken', response.data.accessToken);
  window.location.href = '/dashboard';
} catch (error) {
  alert(error.response?.data?.message || 'Login failed. Please try again.');
}

Step 3: Handle Authentication State (Bonus) #

Once the user is logged in, you'll want to protect routes in your app. A simple approach is to create a custom hook that checks for the access token in localStorage. For larger apps, consider using React Context API or Redux to manage global authentication state.

Key Takeaways #

• Always use e.preventDefault() to stop the default form submission (prevents page reloads).
• Controlled components keep form values in sync with React state, making it easier to handle input and submission.
• Handle API errors gracefully so users get clear feedback about what went wrong.
• Store access tokens securely—localStorage is common, but for sensitive apps, consider using HttpOnly cookies instead.

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