时间戳

首页 > 解决方案 > 按钮点击反应导航到其他页面

reactjs - 按钮点击反应导航到其他页面

问题描述

我有三个文件 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);

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

提前致谢。

标签： reactjsreact-router

解决方案

在您的 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});
        }
    };

处理反应变化的更好方法是：

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

只需传递要更新的 state 属性即可handleChange(username)

此外，在你的Login.js你有这个：

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

如果你通过它，password你应该使用props.password

推荐阅读