【一起来学React】- 事件处理

本章我们来介绍下React中的事件。
大家都知道DOM有很多事件，例如onclick等等很多很多，那么React中的事件是怎么样子的呢！
首发于：https://www.fakin.cn

原生DOM事件

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

第一种方式

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

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

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

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

React事件

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

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

注意，这里的onClick是驼峰写法哦。下面是一个完整的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 onClick={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 onClick={()=>{this.handleBtnClick()}>点我</button>
            </div>
        );
    }

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