React事件处理

react事件处理

1. this.clickHandler.bind(this) ,不懂的看一下Function的bind，修改this指向
2. 箭头函数【没有this】
3. react合成事件与原生事件
4. 关于event 参数
5. react16 事件绑定到 document react17 事件绑定到 root【有利于多个React版本共存，例如微前端】

以下是代码实践

import React from 'react';
class Basics02 extends React.Component{

    constructor(props) {
        super(props);
        this.state = {
            list:[
                {
                    id:1,
                    msg:'x1'
                },
                {
                    id:2,
                    msg:'x2'
                },

            ]
        }

        this.clickHandler = this.clickHandler.bind(this)
    }

    render() {
       return (
            <>
                <ul>
                    {
                        this.state.list.map(v => {
                            return <li key={v.id} onClick={this.clickHandler}>{v.msg}</li>
                        })
                    }
                </ul>
                <hr/>
                <ul>
                    {
                        this.state.list.map(v => {
                            return <li key={v.id} onClick={this.clickHandler2}>{v.msg}</li>
                        })
                    }
                </ul>
                <hr/>
                <a onClick={this.clickHandler3} href='https://www.baidu.com'>百度</a>
                <hr/>

                <a onClick={this.clickHandler4.bind(this,1,2)} href='https://www.baidu.com'>百度2</a>
            </>
        )
    }

    clickHandler(){
        console.log('clickHandler this',this)
    }

    clickHandler2 = () => {
        console.log('clickHandler2 this',this)
    }

    //
    clickHandler3 = (event) => {
        event.preventDefault() // 阻止默认行为
        event.stopPropagation() // 阻止冒泡
        console.log('target', event.target) // 指向当前元素，即当前元素触发
        console.log('current target', event.currentTarget) // 指向当前元素，假象！！！

        // 注意，event 其实是 React 封装的。可以看 __proto__.constructor 是 SyntheticEvent 组合事件
        console.log('event', event) // 不是原生的 Event ，原生的 MouseEvent
        console.log('event.__proto__.constructor', event.__proto__.constructor)

        // 原生 event 如下。其 __proto__.constructor 是 MouseEvent
        console.log('nativeEvent', event.nativeEvent)
        console.log('nativeEvent target', event.nativeEvent.target)  // 指向当前元素，即当前元素触发
        console.log('nativeEvent current target', event.nativeEvent.currentTarget) // 指向 document ！！！

        // 1. event 是 SyntheticEvent ，模拟出来 DOM 事件所有能力
        // 2. event.nativeEvent 是原生事件对象
        // 3. 所有的事件，都被挂载到 document 上, react17开始挂载到 <div id='root'></div> 节点上了，对于微前端很有利
        // 4. 和 DOM 事件不一样，和 Vue 事件也不一样
    }

    // 最后追加一个参数，即可接收 event
    clickHandler4(a,b,event) {
        event?.preventDefault() // 阻止默认行为
        event?.stopPropagation() // 阻止冒泡
        console.log(a,b,event)
    }
}


export default Basics02