React Event Handling

<button onClick={handleClick}>Click</button> # click handler
<button onClick={() => handleClick(id)}>Click</button> # with argument

const handleClick = (e) => { # event handler
    e.preventDefault(); # prevent default
    e.stopPropagation(); # stop bubbling
    console.log(e.target); # event target
};

<input onChange={handleChange} /> # input change
<form onSubmit={handleSubmit}> # form submit
<input onFocus={handleFocus} /> # input focus
<input onBlur={handleBlur} /> # input blur

const handleChange = (e) => {
    setValue(e.target.value); # get input value
};
<input value={value} onChange={handleChange} /> # controlled input

onClick # click event
onChange # input change
onSubmit # form submit
onMouseEnter # mouse enter
onMouseLeave # mouse leave
onKeyDown # key press