While click on submit button the components is reloaded and the input is passing as parameters

[Rushi-Kumar]

class Login extends React.Component { constructor(props) { super(props); this.state = { LoggedIn:false, userName:'', password:'', emailId:'', active:'' } }

componentWillMount() { console.log(this.state); } componentDidMount() {

               console.log(this.state);
           

}

handleName(event){
                        console.log(this.state);
            
                             }
       handlePassword(event){
                        console.log(this.state);
                             }   
                                                
       validation(){
                   console.log(this.state);
                   event.preventDefault();
                  }

render() {

return (
          
               <div  className="w3-border-blue  w3-padding-left-middle w3-padding-right-middle w3-center w3-animate-left w3-transparent" >
                <div className="w3-border-blue w3-transparent">
                <div className=" w3-border-blue w3-center w3-transparent">
                  <h2>LOGIN</h2>
                </div>

                <form className="w3-container  w3-border-blue w3-center w3-transparent" onSubmit={this.validation}>
                  <p>
                  <label className="w3-large w3-left w3-transparent">Name</label>
                  <input  type="text"
                          onChange = {this.handleName.bind(this)}
                          className="w3-input  w3-border-blue w3-transparent" 
                          name =" username"  
                          value={this.state.username}
                         />
                  </p>
                  <p>
                  <label className="w3-large w3-left w3-transparent">Password</label>
                  <input  type="Password" 
                          onChange = {this.handlePassword.bind(this)}
                          className="w3-input  w3-border-blue w3-transparent"
                         value={this.state.password}
                           />
                  </p>
                  <p>
                  <input type="submit" className="w3-button w3-block w3-text-white w3-transparent w3-border w3-border-blue w3-round-large"
                         value="Submit"
                          onClick ={() => { this.validation.bind(this) }} /> 
                  </p>
                          
                </form>
                </div>
                </div>

        );

}

}

export default Login;

[Rushi-Kumar]

for the above problem please help me I am not even performing those actions really but i dont why the login comoponent is reloading is it problem with routing or with component its self

the url is first like this " http://localhost:7890/html/index.html#/login " then after clicking the button even though no click event is provided to the button the url is changing as follows " http://localhost:7890/html/index.html?+username=USERNAME#/login " USERNAMEis what we type in the input textbox named username at first both password and username is passing as parameters and i dont know what i did , now only username is going and the scren means the components is loaded again please help me with this