React 合成事件与原生事件

专心搞前端的第14天
在看《深入react技术栈》的时候试了下2.1章的在react中使用原生事件。发现一些写法不好使了，所以查了下文档，顺便粗略看了下事件。在此做下记录。

import React, { Component } from 'react'; 
class NativeEventDemo extends Component {   
  componentDidMount() {          
    this.refs.button.addEventListener('click', e => {   this.handleClick(e);    });   
  }  
  handleClick(e) {    
    console.log(e);   
  }   
  componentWillUnmount() {    
    this.refs.button.removeEventListener('click');   
  }  
  render() {    
    return <button ref="button">Test</button>;   
  } 
}

原书在ref的用法已不再支持，使用React.createRef()后写了示例如下：

import React,{Component} from "react";

class App extends React.Component {
    constructor() {
        super();
        this.outbtnref = React.createRef()
        this.inbtnref = React.createRef()
        this.inClick = this.inClick.bind(this)
        this.outClick = this.outClick.bind(this)
    }

    componentDidMount() {
        this.outbtnref.current.addEventListener('click',(e)=>{
            console.log('out-dom',e)
            // e.stopPropagation()
        })
        this.inbtnref.current.addEventListener('click',(e)=>{
            console.log('in-dom',e)
            e.stopPropagation()
        })
    }
    inClick(e){
        console.log('in-react',e)    //e.nativeEvent获取原生事件
        // e.stopPropagation()
    }

    outClick(e){
        console.log('out-react',e)
    }


    render() {
        return (
            <div ref={this.outbtnref} onClick={this.outClick}>
                <button ref={this.inbtnref} onClick={this.inClick}>按钮</button>
            </div>
        )
    }
}

export default App

在jsx中书写的事件是合成事件，如果要获取原生事件需使用e.nativeEvent。react并没有将真实事件绑定在元素上，而是将真实事件委托至了document中。

图片.png
图片.png

所以如果在原生事件中使用stopPropagation阻止冒泡的话，合成事件不再触发。如果在合成事件中使用stopPropagation。其实使用的并不是原生的stopPropagation。无法阻止原生事件触发。