Day12 React -Events

在 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