当前位置：首页 > news >正文

React中的合成事件

news 2025/7/8 16:14:38

合成事件与原生事件区别：

1. 命名不一样，原生用纯小写方式，react用小驼峰的方式

原生：onclick React的：onClick

2. 事件处理函数的写法不一样

原生的是传入一个字符串，react写法传入一个回调函数

3. 阻止默认行为方式不同

原生：return false, react中的：event.preventDefault()

class Toggle extends React.Component {constructor(props)super(props)this.state={ isToggleOn: true }// 为了在回调中使用this, 这个绑定是必不可少的this.handleClick = this.handleClick.bind(this)handleClick(){this.setState((prevState) => ({isToggleOn: !prevState.isToggleOn}))}    render(){return (// class的方法默认不会绑定this。如果没有绑定this.handleClick.bind(this) 并把它传入 onClick，this的值为undefined<Button onClick={this.handleClick}> // 2. 传入一个回调函数{this.state.isToggleOn ? 'ON' : 'OFF'}</Button> // 1. onClick小驼峰写法)}}

【拓展：为什么需要绑定this 】

button按钮编译的过程：React.createElement()

// 伪代码
// 证明为什么绑定this
function creteElement (dom, params) {var domObj = document.createElement(dom)domObj.onClick = params.onClick // 后面的onClick(当前的onClick函数)赋值给前面的onClick, 这时，onClick执行的作用域是外层作用域。所以return出去的值找不到this.handleClick。[所以需要绑定this指定到当前的作用域]domObj.innerHTML = params.contentreturn domObj
}React.creteElement('button', {onClick: this.handleClick  
}, this.state.isToggleOn ? 'ON' : 'OFF')

如果不想绑定this的写法：

class Toggle extends React.Component {constructor(props)super(props)this.state={ isToggleOn: true }// 法1：bind绑定：为了在回调中使用this, 这个绑定是必不可少的// this.handleClick = this.handleClick.bind(this)handleClick = () => { // 法2：写成箭头函数，箭头函数没有作用域的this.setState((prevState) => ({isToggleOn: !prevState.isToggleOn}))}    render(){return (// class的方法默认不会绑定this。如果没有绑定this.handleClick.bind(this) 并把它传入 onClick，this的值为undefined<Button onClick={() => this.handleClick()}> // 2. 传入一个回调函数   法3{this.state.isToggleOn ? 'ON' : 'OFF'}</Button> // 1. onClick小驼峰写法)}}