React Js

Event handlers in react js

November 09, 2021

event handlers


Events are what make a webpage interactive. Anytime the user mouses over a part of the website, an event is created. The same is true for anything ranging from clicking on an image to typing in a text box or even the loading of the page. The origin of these events come from HTML and it's JavaScript's job to know how to listen for them and then handle them.

onChange event in Functional Component


  import React, { useState } from 'react';

  function App() {

    var [user,setUser] = useState("");
    var handler = e =>{
      setUser(e.target.value)
    }


    return (
      <div>

        <input type="text" placeholder='usename' value={user}
        name="user"
        onChange={handler}
        /> <br />

        {user}

      </div>
    );
  }

  export default App;

onClick events in functional components

Event handlers are functions that get executed when a given event happens. For example, you can use them to send a message after the user clicks on a button.

You might already know event handlers from plain HTML and JavaScript. Event handlers in React are very similar. HTML provides us with event handlers like onclick, onchange, onfocus, and many more. We can use them by adding them to the HTML element as an attribute.

 
 import React from 'react';

  function App() {
    return (
      <div>

        <button onClick={()=>alert("this is react js")}>
          Click Here..
        </button>

      </div>
    );
  }

  export default App;

onSubmit events in functional components


Form tag:

Note that the code to trigger the submission is attached to the form instead of the button.onSubmit property in the form tag to run a function when the user press the form button.

  1. event.preventDefault() on the onSuscribe function. This line is necessary to avoid the webpage to reload automatically after sending the form.Reloading the page was the normal behavior when you needed server-sided languages to do basic form manipulation before JavaScript became a powerful language.


Because the form is not directly connected to a state that changes the event, you can omit the arrow function to pass the event like in the input field.

 

Input tag:

  1. The input has a property value that receives the state.The input also has a property onChange that runs an arrow function each time the user types inside the field.

  3. The arrow function has 2 events:
    1. The input event fired each time the user types.
    2. The same event passed as an argument to be used in a function.

       
       import { useState } from "react";

        export default function App() {
          const [name, setName] = useState("");

          function onSuscribe(event) {
            event.preventDefault();
            alert(`Welcome on board ${name}`);
          }

          function onName(event) {
            setName(event.target.value);
          }

          return (
            <div className="App">
              <h1>Our new customer is {name}</h1>

          <form onSubmit={onSuscribe}>
            <input value={name} onChange={(event) => onName(event)} />
                <br />
                <button>Suscribe</button>
              </form>
            </div>
          );
        }


onChange - onSubmit Rjs:: Events

   

    import React from "react";
    import { useState } from "react";

    function App() {
      var [fName, sName] = useState("");

      function msg(e) {
        sName(e.target.value);
      }

      function mit(e) {
        e.preventDefault();
        // alert(`${fName}`)
        console.log(`${fName}`);
      }

      return (
        <div>
          <h2>{fName}</h2>
          <br />

          <form onSubmit={mit}>
            <input type="text" value={fName} onChange={msg} />
            <button>Submit</button>
          </form>
        </div>
      );
    }

    export default App;

    // (event) => onName(event)
    // event.preventDefault();
    // event.target.value