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。