Web Development What's New

Bootcamp Notes – Day 12 (Tues) – React: Week 4 – Uncontrolled Forms

Uncontrolled Forms

Uncontrolled Components

Controlled VS Uncontrolled

Controlled forms tie form component values directly to the state of the parent component. They require a lot of initial setup. but are the recommended way to set up form in React. But there is another way to set up forms using Uncontrolled components. Uncontrolled components are an alternative – quicker to set up, easier if you are trying to integrate React code with non-React code. It is a quick and dirty way to create a small form with not much code or if you are trying to integrate React Code with non-React code. For example, you might work on a project that was built without using React, then later wish to add React components to it. Then using uncontrolled components for forms can make that integration easier.

Uncontrolled Forms

So how do uncontrolled forms work? HTML forms naturally keep their own internal state, tacked by the DOM, separate from React app.

Controlled forms: React controls form state.

eBay Electronics: Best tech for way less - Up to 50% off and free shipping

Uncontrolled forms: DOM continues to handle the form state, React just retrieves the date when needed – the form elements within the DOM act as the single source of truth.

We can use refs (short for reference) to retrieve the data – in Reactstrap, called innerRef.

 Exercise: Uncontrolled Forms

HeaderComponent.js

import React, { Component }  from ‘react’;
import { Nav, Navbar, NavbarBrand, NavbarToggler, Collapse, NavItem, Jumbotron, Button, Modal, ModalHeader, ModalBody, Form, FormGroup, Input, Label } from ‘reactstrap’;
import { NavLink } from ‘react-router-dom’;
class Header extends Component {
    constructor(props) {
        super(props);
        this.state = {
          isNavOpen: false,
          isModalOpen: false
        };
        this.toggleNav = this.toggleNav.bind(this);
        this.toggleModal = this.toggleModal.bind(this);
        this.handleLogin = this.handleLogin.bind(this);
    }
    toggleNav() {
        this.setState({
            isNavOpen: !this.state.isNavOpen
        });
    }
    toggleModal() {
        this.setState({
            isModalOpen: !this.state.isModalOpen
        });
    }
    handleLogin(event) {
        alert(`Username: ${this.username.value} Password: ${this.password.value} Remember: ${this.remember.checked}`);
        this.toggleModal();
        event.preventDefault();
    }
    render() {
        return (
            <React.Fragment>
                <Jumbotron fluid>
                    <div className=”container”>
                        <div className=”row”>
                            <div className=”col”>
                                <h1>NuCamp</h1>
                                <h2>a better way to camp</h2>
                            </div>
                        </div>
                    </div>
                </Jumbotron>
                <Navbar dark sticky=”top” expand=”md”>
                    <div className=”container”>
                        <NavbarBrand className=”mr-auto” href=”/”><img src=”/assets/images/logo.png” height=”30″ width=”30″ alt=”NuCamp Logo” /></NavbarBrand>
                        <NavbarToggler onClick={this.toggleNav} />
                        <Collapse isOpen={this.state.isNavOpen} navbar>
                            <Nav navbar>
                                <NavItem>
                                    <NavLink className=”nav-link” to=”/home”>
                                        <i className=”fa fa-home fa-lg” /> Home
                                    </NavLink>
                                </NavItem>
                                <NavItem>
                                    <NavLink className=”nav-link” to=”/directory”>
                                        <i className=”fa fa-list fa-lg” /> Directory
                                    </NavLink>
                                </NavItem>
                                <NavItem>
                                    <NavLink className=”nav-link” to=”/aboutus”>
                                        <i className=”fa fa-info fa-lg” /> About
                                    </NavLink>
                                </NavItem>
                                <NavItem>
                                    <NavLink className=”nav-link” to=”/contactus”>
                                        <i className=”fa fa-address-card fa-lg” /> Contact Us
                                    </NavLink>
                                </NavItem>
                            </Nav>
                            <span className=”navbar-text ml-auto”>
                                <Button outline onClick={this.toggleModal}>
                                    <i className=”fa fa-sign-in fa-lg” /> Login
                                </Button>
                            </span>
                        </Collapse>
                    </div>
                </Navbar>
                <Modal isOpen={this.state.isModalOpen} toggle={this.toggleModal}>
                    <ModalHeader toggle={this.toggleModal}>Login</ModalHeader>
                    <ModalBody>
                        <Form onSubmit={this.handleLogin}>
                                <FormGroup>
                                    <Label htmlFor=”username”>Username</Label>
                                    <Input type=”text” id=”username” name=”username”
                                        innerRef={input => this.username = input} />
                                </FormGroup>
                                <FormGroup>
                                    <Label htmlFor=”password”>Password</Label>
                                    <Input type=”password” id=”password” name=”password”
                                        innerRef={input => this.password = input} />
                                </FormGroup>
                                <FormGroup check>
                                    <Label check>
                                        <Input type=”checkbox” name=”remember”
                                            innerRef={input => this.remember = input} />
                                        Remember me
                                    </Label>
                                </FormGroup>
                                <Button type=”submit” value=”submit” color=”primary”>Login</Button>
                            </Form>
                    </ModalBody>
                </Modal>
            </React.Fragment>
        );
    }
}
export default Header;

Codepen: Toggling Modals

Additional Resources:

Tag

Related Posts

You May Have Missed