處理事件
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; ） 來阻止默認行為梭依。必須明確調(diào)用 preventDefault 。
當使用一個 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 中，類方法默認沒有綁定(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ù)表示當前的 props：
this.setState((prevState, props) => ({
//do something here
}));
條件渲染
在 React 中竣灌，你可以創(chuàng)建不同的組件封裝你所需要的行為。然后秆麸，只渲染它們之中的一些初嘹，取決于你的應(yīng)用的狀態(tài)。
在函數(shù)中使用條件語句
React 中的條件渲染就和在 JavaScript 中的條件語句一樣沮趣。使用 JavaScript 操作符如if或者條件操作符來創(chuà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中使用三目表達式
另一個用于條件渲染元素的內(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ā)砂心。
