react 事件处理&条件渲染

处理事件

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 不会影响组件生命周期方法的触发。