React Events

What is an event in javascript/html?

​

​

Any time a user interacts with the web page, an event occurs

​

• Click
• Move mouse
• Type text

​

​

How do I tell the web page what to do when I click this button?

​

<button>Click Me!</button>

Does this look familiar?

​

<button>Click Me!</button>

​

This is the normal built in way in javascript/html to tell a button what to do when it gets clicked. This has been around for 20 years.

​

​

How do we do this in React/JSX/

​

React uses the same syntax, why would they do it any different? A few rules

​

• onClick must be camel cased
• Remember we are in jsx so we must use {} for the javascript part
• For events, the thing that always goes in the {} is a function

<button onClick={()=>console.log('hello')}>Click Me!</button>

​

​

One more example

​

​

​

What is e?

​

​

​

<input onChange={

(e)=>{

//what happens here

}

}>

</input>

e is an optional parameter. It is an object with information about the event.

target is the thing that the event happened on.

value is a property of a text box to get the words that are in the text box.

​

​

​

<input onChange={

(e)=>{

console.log(e.target.value)

}

}>

</input>

That is is. All you have to do is look up what other events there are and use them as you need.

​

​

​

Most commonly used

Button = onClick

Textbox = onChange

Drop down = onChange