React学习（三）Handling Events & Conditional Rendering

[evantianx]

Handling Events

在React中处理事件跟在DOM元素上绑定事件非常相似。在语法上面有几个不同之处:

• React事件使用驼峰命名
• 通过JSX传递一个函数作为事件处理器，而不是传递一个字符串

  <!-- 在HTML中 -->
  <button onclick="activateLasers()">Button</button>

  <!-- JSX -->
  <button onClick={activateLasers}>Button</button>

• 在React中阻止浏览器默认行为不能通过在事件处理器中返回false，你需要明确调用preventDefault

  function ActionLink() {
  function handleClick(e) {
  e.preventDefault();
  console.log('The link was clicked.');
  }
  
  return (
  <a href="#" onClick={handleClick}>
    Click me
  </a>
  );
  }

  在这里无需担心关于事件处理函数的兼容性，React内部已经封装好

由于在ES6中类语法中，this默认绑定到类实例，也就是说若不创建实例，this将为undefined：

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

    // 将handleClick()中的this绑定到这里
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick() {
    this.setState(prevState => ({
      isToggleOn: !prevState.isToggleOn
    }));
  }

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

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

使用箭头语法可以避免上述绑定操作:

class LoggingButton extends React.Component {
  //箭头函数中的this绑定在定义时所在对象上，而不是使用时所在对象上
  handleClick = () => {
    console.log('this is:', this);
  }

  render() {
    return (
      <button onClick={this.handleClick}>
        Click me
      </button>
    );
  }
}

Conditional Rendering

条件渲染

function WarningBanner(props) {
  //满足条件return null 则该组件不会被渲染
  if (!props.warn) {
    return null;
  }

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

class Page extends React.Component {
  constructor(props) {
    super(props);
    this.state = {showWarning: true}
    this.handleToggleClick = this.handleToggleClick.bind(this);
  }

  handleToggleClick() {
    this.setState(prevState => ({
      showWarning: !prevState.showWarning
    }));
  }

  render() {
    return (
      <div>
        <WarningBanner warn={this.state.showWarning} />
        <button onClick={this.handleToggleClick}>
          {this.state.showWarning ? 'Hide' : 'Show'}
        </button>
      </div>
    );
  }
}

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