在 React中處理事件就像 HTML 一樣，React 可以根據用戶事件執行動作。
具有與 HTML 相同的事件：點擊、更改、滑鼠事件…等。

使用 react 處理事件與在 DOM 上處理事件有一些語法差異。
React 事件是用駝峰式語法編寫的：onClick 而不是 onclick。
React 事件處理程序寫在花括號內：onClick={ ShowDate } 而不是 onClick="ShowDate()"。

今天小實作是用onMouseEnter,onMouseLeave改變背景顏色。

import React, {useState} from 'react'

const Events = () => {
    const palettes = "#D5BFBF"
    const  [bg,setBg] =  useState(palettes);
    const  [name,setName] =  useState("Click Change");

    const bgChange = () =>{     
       let newBg = "#A8E7E9";
       setBg(newBg);
       setName("Change Successful");
    };
    const bgBack = ()=>{
        setBg(palettes);
       setName("Click Change");
    }
    return (
        <div>
            <div style= { {backgroundColor:bg } }>
                <button onMouseEnter={bgChange} onMouseLeave={bgBack}> {name} </button>
            </div>
        </div>
    )
}

export default Events