處理事件

react事件使用駝峰命名，而不是完全小寫。
通過JSX我們可以傳遞一個函數(shù)作為事件處理程序。
與DOM綁定事件類似：

function ActionLink() {
  function handleClick(e) {
    e.preventDefault();
    console.log('The link was clicked.');
  }

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

注意：在 React 中你不能通過返回 false（即 return false; ） 來阻止默認(rèn)行為。必須明確調(diào)用 preventDefault 。

當(dāng)使用一個 ES6 類定義一個組件時，通常的一個事件處理程序是類上的一個方法。
看一個例子：

class Toggle extends React.Component {
  constructor(props) {
    super(props);
    this.state = {isToggleOn: true};

    // 這個綁定是必要的，使`this`在回調(diào)中起作用
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick() {
    console.log('this is:',this);
    this.setState(prevState => ({
      isToggleOn: !prevState.isToggleOn
    }));
  }

  render() {
    return (
      <button onClick={this.handleClick}>
        {this.state.isToggleOn ? 'ON' : 'OFF'}
      </button>
    );
  }
}

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

上面代碼中特意在構(gòu)造函數(shù)中指定了handleClick執(zhí)行時this的指向。
在JSX回調(diào)中你必須注意this的指向。 在 JavaScript 中，類方法默認(rèn)沒有綁定(bind)的。如果你忘記綁定 this.handleClick并將其傳遞給onClick，那么在直接調(diào)用該函數(shù)時，this會是 undefined。

我們可以使用CodePen試試修改代碼的結(jié)果：
把構(gòu)造函數(shù)中的綁定刪掉，再次點擊，控制臺打印this is:undefined，并且報錯Cannot read property 'setState' of undefined。
所以：我們就是要使用方法使handleClick執(zhí)行時的this執(zhí)行正確：

• 構(gòu)造函數(shù)綁定this；
• 箭頭函數(shù)；
• 調(diào)用時綁定onClick={this.handleClick.bind(this)}

所以我們在使用時一定要特別注意事件處理函數(shù)this的指向問題。
還有一點：
setState()可以接收一個函數(shù)，這個函數(shù)接受兩個參數(shù)，第一個參數(shù)表示上一個狀態(tài)值，第二參數(shù)表示當(dāng)前的 props：

this.setState((prevState, props) => ({
    //do something here
}));

條件渲染

在 React 中，你可以創(chuàng)建不同的組件封裝你所需要的行為。然后，只渲染它們之中的一些，取決于你的應(yīng)用的狀態(tài)。

在函數(shù)中使用條件語句

React 中的條件渲染就和在 JavaScript 中的條件語句一樣。使用 JavaScript 操作符如if或者條件操作符來創(chuàng)建渲染當(dāng)前狀態(tài)的元素，并且讓 React 更新匹配的 UI :

function Greeting(props) {
  const isLoggedIn = props.isLoggedIn;
  if (isLoggedIn) {
    return <UserGreeting />;
  }
  return <GuestGreeting />;
}

ReactDOM.render(
  // 修改為 isLoggedIn={true} 試試:
  <Greeting isLoggedIn={false} />,
  document.getElementById('root')
);

在JSX中使用邏輯 && 操作符

在 JavaScript 中， true && expression 總是會得到 expression ，而 false && expression 總是執(zhí)行為 false 。

render() {
    return (
      <div>
        <h1>Hello，{this.props.name.length>0 && "World"}</h1>
        <h2>It is {this.state.date.toLocaleTimeString()}</h2>
        <button onClick={this.handleClick}>點擊</button>
      </div>
    )
  }

在JSX中使用三目表達(dá)式

另一個用于條件渲染元素的內(nèi)聯(lián)方法是使用 JavaScript 的條件操作符 condition ? true : false。

render() {
    return (
      <div>
        <h1>Hello，{this.props.name.length>0 && "World"}</h1>
        <h2>It is {this.state.date.toLocaleTimeString()}</h2>
        <button onClick={this.handleClick.bind(this)}>{this.state.on ? 'on' : 'off'}</button>
      </div>
    )
  }

防止組件渲染

在下面的例子中，根據(jù)名為warn的 prop 值，呈現(xiàn) <WarningBanner /> 。如果 prop 值為 false ，則該組件不渲染：

function WarningBanner(props) {
  if (!props.warn) {
    return null;
  }

  return (
    <div className="warning">
      Warning!
    </div>
  );
}

從組件的 render方法返回 null 不會影響組件生命周期方法的觸發(fā)。