Create a login Form component in Reactjs


React allow us to create reusable component using either class / functional component feature.

login Form component

Our login form make use of the following techniques

  • Callback ref
  • CSS – in React
  • class component
  • props – function passing
  • Property access through refs

Class components

We have two class component one for Login form itself and another for the container Form. The loginform component have the following structure.

import React, { Component } from "react";
import "./assets/style.css";

class LoginForm extends Component {
 constructor(props) {
   super(props);
   this.cbNameRef = null;
   this.cbPassRef = null;
   this.setCbPass = (element) => {
     this.cbPassRef = element;
  };

   this.setCbName = (element) => {
     this.cbNameRef = element;
  };
}

 componentDidMount() {
   if (this.cbNameRef) {
     this.cbNameRef.focus();
  }
}
 reSet = () => {
   if (this.cbNameRef) {
     this.cbNameRef.focus();
     this.cbNameRef.value = "";
     this.cbPassRef.value = "";
  }
};

 render() {
   return (
     <div className="login">
       <label id="align-left" for="uname">
        User Name
       </label>
       <input className="box" id="uname" type="text" ref={this.setCbName} />
       <br />
       <label id="align-left" for="pass">
        Password
       </label>
       <input className="box" id="pass" typ="password" ref={this.setCbPass} />
       <div className="buttonsWrapper">
         <div class="btnWrapper">
           <button
             className="LoginBtnWrapper btnStyle"
             onClick={this.props.loginHandler}
           >
            Login
           </button>
         </div>
         <div class="btnWrapper">
           <button className="ResetBtnWrapper btnStyle" onClick={this.reSet}>
            Reset
           </button>
         </div>
       </div>
     </div>
  );
}
}
export default LoginForm;

Refs

I have used two callbackRefs in this component namely , cbNameRef, cbPassRef which allow us to access the value from another component. The first ref also used to set the focus. The componentDidmount lifecycle method help us to set the primary focus to the name box.

There is also corresponding setMethods for refs for attaching the ref with input fields. The reSet arrow function is for resetting the form ( which only needed within the accessibility of the component)

You also note that the login button handler is not specified, it have to passed through the props of the component from the parent.

If you are not familiar with refs, I suggest you two of the following articles

Using callbackref for accessing DOM object in Reactjs - How to access the DOM using callBackref in Reactjs
Accessing the value of input in Reactjs - How to access the value of input using ref in reacrjs
Accessing the DOM in Reactjs - How to access DOM directly in Reactjs

The Form component

The second component is a Form, which is the container. This component need to interact with login Form. So we need to access the property of the other component. Ref made it possible.

In the Form component we have

  • A event handler
  • Ref
import React, { Component } from "react";
import LoginForm from "./LoginForm";

class Form extends Component {
 constructor(props) {
   super(props);
   this.callBackRef = null;
   this.setCbRef = (element) => {
     this.callBackRef = element;
  };
}

 loginHandler = () => {
   alert("User :" + this.callBackRef.cbNameRef.value);
};
 render() {
   return (
     <div>
       <LoginForm ref={this.setCbRef} loginHandler={this.loginHandler} />
     </div>
  );
}
}

export default Form;

Using the callBackRef we can access the ref of the login Form class without any issue. In fact we can even call the reSet method of the Login Form from the container using this.callBackRef.reSet() which is not required for the functionality of our component.

CSS

We have utilized CSS for styling the form, if you are not familiar with CSS take a look at the CSS styling post.

How to use CSS styles in Reactjs - How to use CSS styles in Reactjs

You can include CSS style code in a file ending with .css extension and then import it to your module, I hope the above post will help you to understand CSS in React.

That’s all. You can find the complete project @ GitHub Repository

Published by

Manoj

A developer,teacher and a blogger obsessed with Python,Dart and open source world from India

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.