25-React事件處理及條件渲染

Handling Events

React元素的事件處理非常類似於對DOM元素添加事件處理，但有一部分的語法不同：

1.React事件使用camelCase（駝峰命名法）來進行命名，而不是小寫字母

2.JSX需要傳遞一個函數作為事件處理函數，而不是一個字符串。

//DOM元素的事件處理函數
<button onclick="activateLaser()">
    Activate Lasers
</button>

//React元素的事件處理函數
<button onClick={activateLasers} >
    Activate Lasers
</button>

3.不能夠通過返回一個false來阻止默認操作。必須調用preventDefault

//DOM元素事件處理阻止默認操作
<a href="#" onclick="console.log('The link was clicked.'); return false;">
    Click me
</a>

//React元素
function ActionLink() {
//e是事件的各種信息，是根據W3C標准定義的。不需要考慮瀏覽器兼容問題
    function handleClick(e) {
        e.preventDefault();
        console.log('The link was clicked.');
    }

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

4.在JSX的回調函數中，要注意this的含義，JavaScript中，類方法並不屬於任何運行形式，所以如果忘記綁定類的this給事件處理函數的話，那么this在事件處理函數中會變成undefined。如果你不帶()來調用一個方法的時候，必須要綁定類的this給事件處理函數。如果這樣很麻煩的話，可以使用箭頭運算符來定義方法。或者使用箭頭運算符來進行回調函數調用。

Conditional Rendering

1.在React中，你可以創建不同的組件，並且渲染其中的一部分，這取決於你應用的狀態。狀態渲染和JavaScript中的分支運算符有一樣的效果，使用JavaScript中的類似if運算符來創建元素來代表當前狀態，然后讓React更新UI去匹配。

if(this.state.isLogin){
    return(
    <div>            
        <Greeting></Greeting>
        <button onClick={this.changeState}>修改狀態</button>  
    </div>)
}else{
    return(
    <div>
        <Login></Login>
        <button onClick={this.changeState}>修改狀態</button>
    </div>)
}

2.元素變量可以使用變量來存儲元素，可以幫助你在保證其他部分的輸出不變的情況下，選擇性的渲染一部分組件。

render() {
    const isLoggedIn = this.state.isLoggedIn;
    let button = null; //通過if條件語句來進行渲染
    if (isLoggedIn) {
        button = <LogoutButton onClick={this.handleLogoutClick} />
    } else {
        button = <LoginButton onClick={this.handleLoginClick} />
    }
    return (
        <div>
            <Greeting isLoggedIn={isLoggedIn} />
            {button}
        </div>
    );
}

2.使用&&運算符實現行內邏輯

根據JavaScript的語法：true && expression的值永遠都是expression，而false && expression的值一直都是false。所以，如果條件表達式的結果為true，那么就會直接返回后面的值，如果結果為false則React會忽略並且跳過后面的表達式。

return (
    <div>
        <h1>Hello!</h1>
        { unreadMessages.length > 0 &&
        <h2>
        You have {unreadMessages.length} unread messages.
        </h2>
        }
    </div>
);

3.行內if-else條件運算符另外一種實現行內渲染元素中的JavaScript條件表達式的是三目運算符condition ? true : false，下面的代碼中使用了三目運算符。

render() {
    const isLoggedIn = this.state.isLoggedIn;
    return (
        <div>
            The user is <b> {isLoggedIn ? 'currently' : 'not'}</b> logged in.
        </div>
    );
}

4.阻止組件渲染在小部分情況下，你可能需要讓一個元素隱藏。可以讓render返回null而不是一個組件。

render() {
    return (
        <div>
            <WarningBanner warn={this.state.showWarning}>
            </WarningBanner>
            <button onClick={this.handleToggleClick}>
            {this.state.showWarning ? 'Hide' : 'Show'}
            </button>
        </div>
    );
}

總結

從上面我們可以學到：

關於Handling Events（事件處理）JSX的語法與JS的四點不同：
1.JSX用駝峰命名事件，JS用小寫字母；
2.JSX的事件處理函數語法 {函數名} ，JS為"函數名()"；
3.JSX調用preventDefault()來阻止默認操作，JS則通過return false；
4.JSX的回調函數中，需要綁定類的this給事件函數，
可在初始化時綁定（this.handleLoginClick = this.handleLoginClick.bind(this);）
或在具體使用該函數的地方綁定（{this.handleLoginClick.bind(this)}），
JS不用綁定（onClick="doHandle(this);"），還可以用箭頭運算符來定義方法或調用回調函數。

關於Conditional Rendering 可以用變量來存儲元素，然后根據流程控制語句以及邏輯運算符
來return需要的變量值，若想阻止渲染則return null。