React点击登录按钮无法跳转页面排查求助（附代码）

我帮你排查出几个导致跳转失败的核心问题，以及对应的修正方案：

问题分析 #

• 密码状态更新错误：在changeHandler中，处理密码输入时错误地更新了username状态，而非password，导致密码永远为空，验证无法通过。
• 输入框name与事件判断不匹配：Login.js中密码输入框的name是passwd，但changeHandler里判断的是event.target.name==="password"，导致密码输入无法触发state更新。
• Props传递名称不匹配：LoginValidation给Login组件传递的props是password={this.changeHandler}，但Login.js中密码输入框绑定的是props.passwd，事件绑定失效。
• 多余的函数参数：clickHandler接收了无用的state参数，虽然不影响功能，但会造成代码混淆。

修正后的代码 #

Login.js #

const Login = (props) => {
  return (
    <div className="login"> {/* React中需使用className替代class */}
      <h2>Login Form</h2>
      <form>
        <label>Username: </label>
        <input
          type="text"
          name="username"
          placeholder="Enter Username"
          onChange={props.onInputChange}
        />
        <br /><br />
        <label>Password: </label>
        <input
          type="password"
          name="password" {/* 统一name属性与state字段一致 */}
          placeholder="Enter Password"
          onChange={props.onInputChange}
        />
        <br /><br />
        <button type="button" onClick={props.onLoginClick}>Login</button>
      </form>
    </div>
  );
};
export default Login;

LoginValidation.js #

import React, { Component } from 'react';
import { withRouter } from "react-router-dom";
import Login from './Login';

class LoginValidation extends Component {
  state = {
    username: '',
    password: '',
    uname: 'dddddd',
    pwd: '22222'
  };

  // 优化：通过name属性动态更新对应state，无需分支判断
  changeHandler = (event) => {
    const { name, value } = event.target;
    this.setState({ [name]: value });
  };

  clickHandler = () => {
    const { username, password, uname, pwd } = this.state;
    if (username === uname && password === pwd) {
      this.props.history.push("/");
    } else {
      alert("Enter proper Credentials");
    }
  };

  render() {
    return (
      <div>
        <Login 
          onInputChange={this.changeHandler} 
          onLoginClick={this.clickHandler} 
        />
      </div>
    );
  }
}

export default withRouter(LoginValidation);

额外优化说明 #

1. 统一使用一个changeHandler处理所有输入，利用ES6的计算属性名动态更新state，让代码更简洁可维护。
2. 将HTML的class改为React要求的className，避免DOM属性冲突。
3. 重命名props为更语义化的名称（如onInputChange、onLoginClick），提升代码可读性。

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