4. React中的事件绑定：基础事件；使用事件对象参数；传递自定义参数；同时传递事件参数和自定义参数

React 基础事件绑定

基础事件

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

如点击事件

<button onClick={clickHandler1}>点击事件</button><br/>// 点击事件
const clickHandler1 = () => {console.log('点击事件')
}

使用事件对象参数

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

这里e不是固定的写法，也可以叫别的名字，通常规范一点就叫做e。

<button onClick={clickHandler2}>事件对象参数</button><br/>// 事件对象参数
const clickHandler2 = (e) => {console.log('事件对象参数', e)
}

传递自定义参数

语法：事件绑定的位置改成箭头函数的写法，在执行clickHandler3实际处理业务函数的时候传递实参。
注意：不能直接写函数调用，这里事件绑定需要一个函数引用。

<button onClick={() => clickHandler3('张三')}>自定义参数</button>// 自定义参数
const clickHandler3 = (name) => {console.log('自定义参数', name)
}

同时传递事件参数和自定义参数

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

<button onClick={(e) => clickHandler4('张三', e)}>同时传递事件参数和自定义参数</button>// 同时传递事件参数和自定义参数
const clickHandler4 = (name, e) => {console.log('同时传递事件参数和自定义参数', name, e)
}

完整代码和效果

// React中的事件绑定：基础事件；使用事件对象参数；传递自定义参数；同时传递事件参数和自定义参数
function App2() {return (<div className="App">这是 App2.js<br/><button onClick={clickHandler1}>点击事件</button><br/><button onClick={clickHandler2}>事件对象参数</button><br/><button onClick={() => clickHandler3('张三')}>自定义参数</button><br/><button onClick={(e) => clickHandler4('张三', e)}>同时传递事件参数和自定义参数</button><br/></div>);
}// 点击事件
const clickHandler1 = () => {console.log('点击事件')
}// 事件对象参数
const clickHandler2 = (e) => {console.log('事件对象参数', e)
}// 自定义参数
// 使用场景：删除列表项、修改列表项、添加列表项等
const clickHandler3 = (name) => {console.log('自定义参数', name)
}// 同时传递事件参数和自定义参数
const clickHandler4 = (name, e) => {console.log('同时传递事件参数和自定义参数', name, e)
}export default App2;