一起来学React-事件处理

本章我们来介绍下React中的事件。
大家都知道DOM有很多事件，例如 等等很多很多，那么React中的事件和DOM的原生事件中有什么区别和相同之处呢？
首发于：https://www.fakin.cn

原生DOM事件

想必大家都知道原生DOM注册事件的方式。

第一种方式

<a href=\"#\"  =\"alert(\'Fakin\'); return false;\">
   点我
</a>

其中return false是阻止浏览器默认行为的！
第二种方式

<a href=\"#\" id=\"Fakin\">
   点我
</a>
<  type=\"text/ \">
document.querySelector(\'#Fakin\').addEventListener(\'click\', (e) => {
        e.preventDefault();
        console.log(\"Fakin\");
    });
</ >

好多人称它们为DOM0、DOM2级事件。不扯远了，说回到React事件

React事件

React中事件注册的方式其实和原生DOM中的第一种方式很类似的。

<button  ={activateLasers}>Fakin</button>

注意，这里的 是驼峰写法哦。下面是一个完整的React事件示例代码

class App extends Component {
    constructor(props) {
        super(props);
        this.state = {
          count:0
        }
    }
    handleBtnClick(e) {
         e.preventDefault();
         this.setState({
            count: this.state.count + 1
         })
        console.log(\'fakin\')
    }
    render() {
        return (
            <div id=\"box\">
                <p>{this.state.count}</p>
                <button  ={this.handleBtnClick}>点我</button>
            </div>
        );
    }
}

完整吗？完整吗？如果我说这代码你运行的时候会报错，你信不信。

React事件处理函数的this

this是啥就不介绍了，咱们说回上面的问题，当你点击的时候，代码会报错，这是因为你的this指向问题。

React推荐方法

 constructor(props) {
        super(props);
        this.state = {
          count:0
        }
        this.handleBtnClick = this.handleBtnClick.bind(this)
    }

箭头函数

render() {
        return (
            <div id=\"box\">
                <p>{this.state.count}</p>
                <button  ={()=>{this.handleBtnClick()}>点我</button>
            </div>
        );
    }

还记得箭头函数中对于this指向的说明吗？
大致就是箭头函数的this在函数定义的时候就绑定了，指向最近的父级作用域，并不是没有this哦！
相信看完你对于react事件有了一定的了解了，更多细节问题，建议参考react官方文档（英文，中文文档有时候会有落后翻译，实在看不懂英文，就装一个谷歌翻译插件）