React中的合成事件

news2025/1/9 9:52:53

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

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.content
    return 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小驼峰写法

        )
    }

}