按钮点击反应导航到其他页面答案

【问题标题】：Navigate to other page upon button click in react按钮点击反应导航到其他页面
【发布时间】：2019-12-24 12:32:47
【问题描述】：

我有三个文件 Login.js 、 LoginValidation.js 和 App.js。在 Login.js 中，我使用了带有 props 的箭头函数。在 LoginValidation.js 中，我导入了 Login.js。在 LoginValidation 中，我使用了类和组件。在状态下我声明了四个变量。两个用于更新状态，两个值是用户名和密码的默认值，稍后我将使用前两个变量进行验证。通过 onchange 事件，我捕获了用户名和密码的值并更新了前两个变量的状态。后来我用状态中的默认值验证了捕获的值，如果匹配，我将导航到其他页面。

//登录.js文件

const login=(props)=>{

 return(
    <div class="login">
        <h2>Login Form</h2>
     <form >
     <label >Username: </label>
     <input type="text" name="username" placeholder="Enter Username" onChange={props.username}/>
     <br></br> <br></br>
     <label>Password:  </label>
     <input type="password" name="passwd"  placeholder="Enter Password" onChange={props.passwd} />

      <br></br> <br></br>
      <button type="button" onClick={props.click}>Login</button>

      </form>
    </div>

 )};
export default login;

//LoginValidation.js 文件

import { withRouter } from "react-router-dom";
class LoginValidation extends Component{
state={
    username:'',
    password:'',
    uname:'dddddd',
    pwd:'22222'
};

//捕获输入并更新状态的函数

changeHandler=(event)=>{
    if(event.target.name==="username"){
        this.setState({username:event.target.value});
    }
    if(event.target.name==="password"){
        this.setState({username:event.target.value});
    }
};

//按钮点击时执行的函数

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

render(){
    return(
      <div>
          <Login username={this.changeHandler} password={this.changeHandler} 
            click={this.clickHandler}
          />

      </div>
    )
}


}
export default withRouter(LoginValidation);

单击按钮时我出错了，无法弄清楚。你能帮帮我吗？？

提前致谢。

【问题讨论】：

点击按钮时当前的错误或行为是什么？
我无法重定向到我提供的页面
检查控制台时是否有错误？
我的控制台没有发现任何错误

标签： reactjs react-router

【解决方案1】：

在您的 changeHandler 中，您将状态设置为用户名 2 次而不是密码

  changeHandler=(event)=>{
        if(event.target.name==="username"){
            this.setState({username:event.target.value});
        }
        if(event.target.name==="password"){
            this.setState({username:event.target.value});
        }
    };

处理 react 变化的更好方法是：

handleChange = name => event => {
   this.setState({
      [name]: event.target.value,
   })
}

只要传递你想要更新的状态属性有handleChange(username)这样的参数

另外，在您的 Login.js 中，您有这个：

<input type="password" name="passwd"  placeholder="Enter Password" onChange={props.passwd} />

如果您将其传递为password，则应使用props.password

【讨论】：