React事件處理

事件處理

React元素的時間處理和DOM元素的很類似。可是有一點語法上的不一樣；

• React時間綁定屬性的命名採用駝峯式寫法，而不是小寫。
• 若是採用JSX的語法，你須要傳入一個函數做爲時間處理函數，而不是一個字符串（DOM元素的寫法）

例如，傳統的HTML：

<button onclick="activateLasers()">
  Activate Lasers
</button>

React中稍有不一樣：

<button onClick={事件處理函數}>
    Activate Lasers
</button>

在React中另一個不一樣是你不能使用返回false的方式組織默認行爲。你必須明確使用preventDefault。例如，傳統的HTML中阻止連接默認打開一個新頁面，你能夠這樣寫：

<a href="#" onclick="console.log('The link was clicked.'); return false">
  Click me
</a>

而在React中，應該這樣寫：

function ActionLink(){
    function handleClick(e){
        e.preventDefault();
        console.log(11111)
    }
    return(
        <a  href="#" onClick={handleClick}>
            Click me
        <a/>
    )
}

在這裏，e 是一個合成事件。React 根據 W3C spec 來定義這些合成事件，因此你不須要擔憂跨瀏覽器的兼容性問題。查看 SyntheticEvent 參考指南來了解更多。

使用 React 的時候一般你不須要使用 addEventListener 爲一個已建立的 DOM 元素添加監聽器。你僅僅須要在這個元素初始渲染的時候提供一個監聽器。

當你使用 ES6 class 語法來定義一個組件的時候，事件處理器會成爲類的一個方法。例如，下面的 Toggle 組件渲染一個讓用戶切換開關狀態的按鈕：

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

ReactDOM.render(
    <Toggle />,
    document.getElementById('root')
);

你必須謹慎對待JSX回調函數中的this，類的方法默認是不會綁定this的。若是你忘記綁定this.handleClick並把它傳入onClick，當你調用這個函數的時候，this的值會是unde.

這並非 React 的特殊行爲；它是函數如何在 JavaScript 中運行的一部分。一般狀況下，若是你沒有在方法後面添加 () ，例如 onClick={this.handleClick}，你應該爲這個方法綁定 this。