处理事件
react事件使用驼峰命名，而不是完全小写。
通过JSX我们可以传递一个函数作为事件处理程序。
与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; ） 来阻止默认行为。必须明确调用 preventDefault 。
当使用一个 ES6 类定义一个组件时，通常的一个事件处理程序是类上的一个方法。
看一个例子：
class Toggle extends React.Component {
constructor(props) {
super(props);
this.state = {isToggleOn: true};
// 这个绑定是必要的，使`this`在回调中起作用
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')
);
上面代码中特意在构造函数中指定了handleClick执行时this的指向。
在JSX回调中你必须注意this的指向。 在 JavaScript 中，类方法默认没有绑定(bind)的。如果你忘记绑定 this.handleClick并将其传递给onClick，那么在直接调用该函数时，this会是 undefined。
我们可以使用CodePen试试修改代码的结果：
把构造函数中的绑定删掉，再次点击，控制台打印this is:undefined，并且报错Cannot read property 'setState' of undefined。
所以：我们就是要使用方法使handleClick执行时的this执行正确：
- 构造函数绑定
this； - 箭头函数；
- 调用时绑定
onClick={this.handleClick.bind(this)}
所以我们在使用时一定要特别注意事件处理函数this的指向问题。
还有一点：
setState()可以接收一个函数，这个函数接受两个参数，第一个参数表示上一个状态值，第二参数表示当前的 props：
this.setState((prevState, props) => ({
//do something here
}));
条件渲染
在 React 中，你可以创建不同的组件封装你所需要的行为。然后，只渲染它们之中的一些，取决于你的应用的状态。
在函数中使用条件语句
React 中的条件渲染就和在 JavaScript 中的条件语句一样。使用 JavaScript 操作符如if或者条件操作符来创建渲染当前状态的元素，并且让 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 总是执行为 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中使用三目表达式
另一个用于条件渲染元素的内联方法是使用 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>
)
}
防止组件渲染
在下面的例子中，根据名为warn的 prop 值，呈现 <WarningBanner /> 。如果 prop 值为 false ，则该组件不渲染：
function WarningBanner(props) {
if (!props.warn) {
return null;
}
return (
<div className="warning">
Warning!
</div>
);
}
从组件的 render方法返回 null 不会影响组件生命周期方法的触发。
