與原生的事件處理有點(diǎn)差異，具體表現(xiàn)在：

1. react使用駝峰事件命名,而不是小寫(xiě)
2. 對(duì)于句柄來(lái)說(shuō)傳遞的是一個(gè)jsx函數(shù)

//原生的寫(xiě)法
<button onclick="activateLasers()">
  Activate Lasers
</button>
//react寫(xiě)法
<button onClick={activateLasers}>
  Activate Lasers
</button>

3. 阻止瀏覽器默認(rèn)行為，原生事件處理，可以通過(guò)返回false來(lái)阻止阻止瀏覽器默認(rèn)行為，也可以通過(guò)調(diào)用事件對(duì)象的preventDefault方法來(lái)實(shí)現(xiàn)。而react只能通過(guò)調(diào)用preventDefault來(lái)實(shí)現(xiàn)。

//原生的處理方式
<a href="#" onclick="console.log('The link was clicked.'); return false">
  Click me
</a>
//在react中
function ActionLink() {
    function handleClick(e) {
        e.preventDefault();
        console.log('The link was clicked.');
    }

    return (
        <a href="#" onClick={handleClick}>
            Click me
    </a>
    );
}

實(shí)例： 在頁(yè)面實(shí)現(xiàn)按鈕開(kāi)關(guān)
在Toggle組件中，返回了button，根據(jù)狀態(tài)顯示on/off文案，并且監(jiān)聽(tīng)點(diǎn)擊事件，回調(diào)函數(shù)為handleClick，在回調(diào)中設(shè)置組件的狀態(tài)，state改變后，則又調(diào)用render方法，更新UI。

class Toggle extends React.Component {
    constructor(props) {
        super(props);
        this.state = { isToggleOn: true };
        this.handleClick = this.handleClick.bind(this);
    }
    handleClick() {
        this.setState(prevState => ({
            isToggleOn: !prevState.isToggleOn
        }));
    }
    render() {
        return (
            <button onClick={this.handleClick}>
                {this.state.isToggleOn ? 'ON' : 'OFF'}
            </button>
        );
    }
}
ReactDOM.render(
    <Toggle />,
    document.getElementById('root')
);

此處bind函數(shù)很有意思：先來(lái)看，bind的函數(shù)作用：改變函數(shù)執(zhí)行的上下文，也就是this的指向。
bind函數(shù)會(huì)創(chuàng)建一個(gè)新的函數(shù)，稱為綁定函數(shù)，并且調(diào)用的時(shí)候上下文指向創(chuàng)建時(shí)傳入的第一個(gè)參數(shù)。
在本例中，點(diǎn)擊出發(fā)onClick事件后，執(zhí)行this.handleClick，此時(shí)的this指向是當(dāng)前Toggle對(duì)象。

如果不使用bind函數(shù)，還可以使用屬性初始化語(yǔ)法，也可以直接在鉤子函數(shù)處使用箭頭函數(shù)

handleClick = () => {
        this.setState(prevState => ({
            isToggleOn: !prevState.isToggleOn
        }));
    }

render() {
        return (
            <button onClick={(e) => this.handleClick(e)}>
                Click me
      </button>
        );
    }