本章我們來介紹下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官方文件（英文，中文文件有時候會有落後翻譯，實在看不懂英文，就裝一個谷歌翻譯外掛）