ReactJS登录表单提交数据与JSON文件数据比对实现求助

Hey there! Let's get your login form set up to validate against your JSON user data. I'll walk through completing your component and adding the core authentication logic step by step.

First, let's finish your component structure and add the necessary state and handlers:

import React, { Component } from 'react';
import { connect } from 'react-redux';
import { login } from '../../redux/reducer';
import './LoginForm.css';
import logindetls from '../../logindet.json';

class LoginForm extends Component {
  constructor(props) {
    super(props);
    // Initialize state to track form inputs and error messages
    this.state = {
      username: '',
      password: '',
      error: ''
    };
  }

  // Update state whenever user types in input fields
  handleInputChange = (e) => {
    const { name, value } = e.target;
    this.setState({ [name]: value });
  };

  // Handle form submission and validate credentials
  handleSubmit = (e) => {
    e.preventDefault();
    const { username, password } = this.state;

    // Check if submitted credentials match any user in the JSON file
    const validUser = logindetls.find(user => 
      user.username === username && user.password === password
    );

    if (validUser) {
      // Dispatch Redux login action with valid user data
      this.props.login(validUser);
      // Reset form state
      this.setState({ username: '', password: '', error: '' });
      // Redirect to dashboard (use React Router's history if you have it set up)
      this.props.history?.push('/dashboard');
    } else {
      // Show error if credentials are invalid
      this.setState({ error: 'Invalid username or password' });
    }
  };

  render() {
    const { username, password, error } = this.state;

    return (
      <div className="login-form">
        <form onSubmit={this.handleSubmit}>
          <h2>Login</h2>
          {/* Display error message if login fails */}
          {error && <div className="login-error">{error}</div>}
          
          <div className="form-group">
            <label htmlFor="username">Username:</label>
            <input
              type="text"
              id="username"
              name="username"
              value={username}
              onChange={this.handleInputChange}
              required
            />
          </div>

          <div className="form-group">
            <label htmlFor="password">Password:</label>
            <input
              type="password"
              id="password"
              name="password"
              value={password}
              onChange={this.handleInputChange}
              required
            />
          </div>

          <button type="submit">Sign In</button>
        </form>
      </div>
    );
  }
}

// Connect component to Redux dispatch
const mapDispatchToProps = {
  login
};

// Uncomment below if you need React Router history for redirects
// import { withRouter } from 'react-router-dom';
// export default withRouter(connect(null, mapDispatchToProps)(LoginForm));

export default connect(null, mapDispatchToProps)(LoginForm);

Key Details Explained: #

• State Management: We added username, password, and error to track user input and validation feedback.
• Input Sync: The handleInputChange function uses the input's name attribute to update the correct state property, keeping form inputs in sync with component state.
• Credential Check: We use Array.find() to match submitted credentials against the user data in your JSON file.
• Redux Integration: On successful login, we dispatch the login action to update your Redux store (make sure your reducer handles this action to set auth state like isAuthenticated or currentUser).
• Error Feedback: A clear error message is displayed if the username/password combination doesn't exist in the JSON data.

Required JSON Structure (logindet.json): #

Make sure your JSON file is an array of user objects, like this:

[
  {
    "username": "lex_v",
    "password": "yourSecurePassword123"
  },
  {
    "username": "test_user",
    "password": "testPass456"
  }
]

Quick Production Tips: #

• Never Store Plain Text Passwords: For real apps, always store hashed passwords (use libraries like bcrypt) and compare hashed values during login.
• Add Extra Validation: You can add checks for minimum password length, valid username formats, etc., to improve user experience.
• Consider Hooks: If you're open to it, refactoring this to a functional component with useState and useDispatch (Redux Hooks) can make the code more concise.

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