Google+

Shineyrock

web design & consultancy

Shineyrock

  1. web design and consultancy

blog

  1. Home
  2. blog
  3. read
  4. Understanding Forms and Events in React
  • like 3 11

    Understanding Forms and Events in React

    1. December 2016
    2. Daily
    3. read 715

    React is a JavaScript library built by Facebook for composing user interfaces in single-page applications. In this tutorial, we'll discuss what events are, how they work in React, and how to set up event handlers on a controlled form in your React application.

    To follow along with this tutorial, just create a new React app with create-react-app:

    npx create-react-app my-project-name

    You can also find the source code for this tutorial in our GitHub repo.

    Controlled Inputs in React

    Controlled inputs are basically a way of setting up inputs and forms in React, so that we can track their values. This involves storing the value typed into the input by the user inside some form of state.

    Consider the following component, for example:

    import { useState } from "react";

function UserProfile(props) {
    const [name, setName] = useState("");
    const [email, setEmail] = useState("");
    const [age, setAge] = useState(0);
    const [password, setPassword] = useState("");

  return (
    <div className="App">
        <h2>Provide your profile details</h2>
        <form>
            <div>
                <label for="name-field">Name</label>
                <input
                    id="name-field"
                    type="text"
                    value={name}
                />
            </div>

            <div>
                <label for="email-field">Email</label>
                <input
                    id="email-field"
                    type="text"
                    value=
                />
            </div>

            <div>
                <label for="age-field">Age</label>
                <input
                    id="age-field"
                    type="number"
                    value={age}
                />
            </div>

            <div>
                <label for="password-field">Password</label>
                <input
                    id="password-field"
                    type="text"
                    value={password}
                />
            </div>

            <button type="button">Submit</button>

        </form>
    </div>
  );
}

export default UserProfile;

    As you might have guessed, UserProfile is a simple component that renders a form through which users can submit their profile details. You can save it in src/UserProfile.js within your app folder.

    The input in this component is a controlled input. We began by importing useState() from React, and we then went on to define the initial states for the various input fields. 

    Each of the values defined in state is directly bound to its respective input. This creates a two-way flow of data between the state and the form inputs.

    Let's go on and import the UserProfile component in src/App.js, the root component:

    import UserProfile from './UserProfile';

function App() {
  return (
    <div className="App">
      <UserProfile />
    </div>
  );
}

export default App;

    Finally, let's update the CSS in src/App.css. Replace the existing file with the following styles:

    .App {
  text-align: left;
  margin-left:20%;
  margin-right:20%;
}

label {
  display: inline-block;
  margin-right: 1em;
  width: 4em;
}
input {
  width: 15em;
}

    When we save the file and run the local dev server, the component will be rendered in the app.

    Image of Form InputsImage of Form InputsImage of Form Inputs
    Image of Form Inputs

    Now we have bound the view (the form) to the model (aka the state). However, any data supplied through the form at this point will not be stored in the state. This is because React has no way of knowing when the user types into the input field on the UI.

    To connect the state to the view, we'll need to set up event handlers on the various form inputs. This brings us to the next topic, Events.

    React Events

    An event is an action that could be triggered as a result of the user action or a system-generated event. An event could be a mouse click, the loading of a web page, the user pressing a key or resizing the window, as well as other UI interactions.

    To make our component UserProfile into a fully controlled component, we need to set up event handlers on the inputs. Here's what the name-field input element will look like:

                    <input
                    id="name-field"
                    type="text"
                    value={name}
                    onChange={(e) => setName(e.target.value)}
                />

    You can update the email, age, and password inputs in a similar way, calling the setEmail, setAge, and setPassword functions provided by the useState hook.

    The onChange event is triggered whenever the value of the input is changed. When this event is fired, we simply call the relevant setter method to update a corresponding part of the state with new values. 

    Inside the setter method, we define a callback function that takes the event (e) as an argument. Through this event, we access whatever value the user typed into the input by accessing event.target.value.

    Now, any data supplied through the form will be automatically stored in the state. We can observe this by logging the state values to the console when the submit button is clicked. First, create a function to log the state and put it in the UserProfile component above the return statement.

        const logState = () => {
        console.log(name);
        console.log(email);
        console.log(age);
        console.log(password);
    }

    Then, update the submit button to call this function when it is clicked.

                <button type="button" onClick={ logState }>Submit</button>

    When the button is clicked, the values will be logged in the console.

    Console Output
    Console Output

    Conversely, whenever a value in the state is changed for any reason, React will in turn update the value that we see in the input field. 

    This is otherwise called the two-way binding of data. That is data flows from view to state, and state to view.

    Emitting Events in React

    Suppose we want to send data from a child component to whichever component uses it (aka the parent)—we do this by emitting an event to the parent component.

    In our case, the App component is the parent of UserProfile. We can send the state from UserProfile to App by emitting an event. First, create a function to emit the event in the UserProfile component:

        const emit = () => {
        props.callback({name: name, email: email, age: age, password: password});
    }

    Then, update the submit button to call that emit function.

                <button type="button" onClick={ emit }>Submit</button>

    On clicking the button, we emit the values for name, email, age, and password from the state to the parent component, which is App in our case.

    Inside App, we'll import useState:

    import { useState } from 'react';

    Create a state for the data from the form:

      const [data, setData] = useState({});

    And handle the event emitted by UserProfile:

      return (
    <div className="App">
      <UserProfile callback={importData} />
      <p>Name: {"name" in data ? data["name"] : "No name To Display" }</p>
      <p>Email: {"email" in data ? data["email"] : "No email To Display" }</p>
    </div>
  );

    We began by importing useState() and instantiating it with an empty object. Then we defined the importData function. This is the callback function to be called by UserProfile. This function takes data from UserProfile and updates App's state with it.

    In the template, we pass down this function to UserProfile as props, which is exactly how we were able to access it from within UserProfile.

    Whenever we pass values into the form input and click on submit, the values will be emitted to the parent, to display in the template:

    Console OutputConsole OutputConsole Output
    Console Output

    Wrapping Up

    I hope this tutorial helped you understand React events better. In this tutorial, we went over controlled components, event handling, and event emission, with some React code examples. 

    You should now be able to set up a controlled component in React, bind state data with controlled inputs, and emit data from child component to parent component.

    If you have any questions related to this topic, please let me know in the comments.

    Photo

    martijn broeders

    founder/ strategic creative at shineyrock web design & consultancy
    e-mail: .(JavaScript must be enabled to view this email address)
    phone: 434 210 0245
    3
    Add a comment...
    Comments

By - category

By - date

Copyright © 1999 - 2026 Shineyrock web design and consultancy, All Rights Reserved / Terms of Conditions / Sitemap: XML, HTML, Images, Mobile, News