1 / 10

REACT EVENT

In any web application, typically used to have user interaction. When user interacts the events start functioning like mouse clicks, mouse hover, and change event and so on. Application must handle the event and execute the necessary code. Know more about event handling create functional component file or functional component using snippet like RFCE. Donu2019t add parenthesis after event handler function like u201cclickHandleru201d because it is a function not function call.<br><br>https://www.ducatindia.com/javatraining/

ducathub
Download Presentation

REACT EVENT

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. WELCOME TO DUCAT INDIA Language | Industrial Training | Digital Marketing | Web Technology | Testing+ | Database |  Networking | Mobile Application | ERP | Graphic | Big Data | Cloud Computing React Event 7070905090 info@ducatindia.com

  2. React Event In any web application, typically used to have user interaction. When user interacts the events start functioning like mouse clicks, mouse hover, and change event and so on. Application must handle the event and execute the necessary code. Know more about event handling create functional component file or functional component using snippet like RFCE. Don’t add parenthesis after event handler function like “clickHandler” because it is a function not function call. When you click the mouse with that click many events occur in code as follow-: Following there is components code created for event handling-:

  3. FunctionClick.js

  4. So here button is created. The css button is also created but focus on event only so how it looks-:

  5. So in above code ‘bgChange’ function is used so that when you click button the background color will be changed. The function should also be called above in “const”

  6. So now when button is clicked then it shown in console according to above written code. To use styling in same file “inline.css” is used. < div style = {{ backgroundColor: “red” }}> If you want to change value of backgroundColor to some other using state to save previous change then in functional components hooks are used to write the state. Const [bg, setBg] = useState(); Above expression is known as array destructuring. Here bg is used to save state and setBg set updation of state, if you want change color to purple using states and hooks then it is written as-:

  7. Now new variable is created and in that setBg state is accessed. Now whatever you will pass the value it will save in “bg”

  8. Now if you want different events or states that is by clicking button some other button text appears or some emoji you want to add then use “setState” with respective properties as-: To add emoji , with “OUCH!! Add emoji name”

  9. Then after clicking it is shown as-:

  10. THANK YOU React Event 7070905090 info@ducatindia.com

More Related