react_basic_practice2

React 基础事件绑定

语法：on + 事件名称 = {事件处理程序}，整体上遵循驼峰命名法

function App() {
    const handleClick = () => {
        console.log('clickeddddd');
    }

    return (
        <>
            <div>
                <button onClick={handleClick}>click me</button>
            </div>
        </>
    )
}

获取事件对象 e （经常使用的 ⭐⭐⭐）

语法：在事件回调函数中设置形参e

    const handleClick = (e) => {
        console.log('clickeddddd', e);
    }

自定义参数

语法：事件绑定的位置改造成 箭头函数 的写法

function App() {
    const handleClick = (name) => {
        console.log('clickeddddd', name);
    }

    return (
        <>
            <div>
                {/*  箭头函数的写法 ===  () => handleClick('jack') */}
                <button onClick={() => handleClick('jack')}>click me</button>
            </div>
        </>
    )
}

同时需要 自定义参数 和 事件对象 e

语法： 在事件绑定的位置传递事件对象 e 和 自定义参数， clickHandler 中声明形参，注意顺序对应.

function App() {
    const handleClick = (name, e) => {
        console.log('clickeddddd', name, e);
    }
    return (
        <>
            <div>
                <button onClick={(e) => handleClick('jack', e)}>click me</button>
            </div>
        </>
    )
}