Question

我有三个文件Login.js，LoginValidation.js和App.js。在Login.js中，我使用了带有道具的箭头功能。在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);

单击按钮后无法弄清楚，我出了点问题。你能帮我吗??

谢谢。

Answer 1

在您的changeHandler中，您将State设置为用户名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

点击按钮后导航到其他页面

1 个答案: