React Event Handling

React Element 中註冊事件的方法

class MyHead extends React.Component
{
    render(){
        return React.createElement("H1", {
            // 在屬性中註冊事件處理器變為Camel命名: onclick => onClick, 
            onClick:this.clickHandler.bind(this)
        }, "Hello World");
    }
    clickHandler(e){
        //事件處理器的第一個參數, 取得 Event Object
        console.log(this.props);
    }
}


JSX 中註冊事件的方法

class MyHead extends React.Component
{
    render(){
        return <div onClick={this.clickHandler.bind(this)}
                    className={"head-"+this.props.level}>Hello Component</div>;
    }
    clickHandler(e){
        //事件處理器的第一個參數, 取得 Event Object
        console.log(this.props);
    }
}


回顧一下上一篇文章， JSX 動態綁定物件是使用 {} 。

事件就如同一個物件一樣，所以使用方式就是 onClick={this.clickHandler.bind(this)} 。 React 事件是使用 Camel命名，後面單字的開頭要大寫。 這裡使用 bind 來綁定物件，確保事件中的 this 為物件本人。

下方事件的 function :

    clickHandler(e){
        this.setState({color:"blue"});
    }

第一個參數 e 是事件物件，這是原生瀏覽器事件。

如果想知道事件詳細的說明，可以參閱 SyntheticEvent。


完整可動的 Sample Code

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title>My Component</title>
        <script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
        <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
        <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
        <style type="text/css">
            .head-3 {font-size: 1.2em;font-weight: bold;}
        </style>
        <script type="text/babel">
            //設計組件類別
            class MyHead extends React.Component{
                constructor(props){
                    super(props);
                    this.state={color:"red"};
                }
                render(){
                    //return React.createElement("div", {className:"head", style:{color:this.props.color}}, "Hello World" + this.props.level);
                    return <div className={"head-" + this.props.level} 
                                style={{color: this.state.color}} 
                                onClick={this.clickHandler.bind(this)}
                                onMouseOver={this.mouseOverHandler.bind(this)}
                                onMouseOut={this.mouseOutHandler.bind(this)}>Hello World</div>;  
                }
                mouseOutHandler(e){
                    this.setState({color:"red"});
                }
                mouseOverHandler(e){
                    this.setState({color:"blue"});
                }
                clickHandler(e){
                    this.setState({color:"blue"});
                }
            }
            window.addEventListener("load", ()=>{
                ReactDOM.render(<MyHead level="3"/>, document.body);
            })
        </script>
    </head>
</html>


小結

回顧上面我們知道 React Element 和 JSX 的事件處理，以及如何實作事件。並在最後提供完整的程式碼讓大家可以測試使用看看。


Refernece