事件系统

合成事件的绑定方式

JSX

<button onClick={this.handleClick>Test</button>

DOM0

<button onClick="handleClick()">Test</button>

合成事件的实现机制

• 事件委派
  把所有事件绑定到结构的最外层，使用统一的监听器，事件监听器维持了一个映射来保存所有组件内部的事件监听和处理函数。当组件挂载或卸载时，只是在统一的事件监听器上插入或者删除一些对象；当事件发生时，首先被这个统一的事件监听器处理，然后在映射里找到真正的事件处理函数并调用
• 自动绑定
  bind

import React, { Component } from 'react';

class App extends Component {
  handleClick(e, arg) {
    console.log(e, arg);
  }
  render() {
    return <button onClick={this.handleClick.bind(this, 'test')}>Test</button>
  }
}

双冒号语法

import React, { Component } from 'react';

class App extends Component {
  handleClick(e) {
    console.log(e);
  }
  render() {
    return <button onClick={::this.handleClick}>Test</button>;
  }
}

构造器内部声明

import React, { Component } from 'rect';

class App extends Component {
  constructor(props) {
    super(props);
    this.handleClick = this.handleClick.bind(this);
  }
  handleClick(e) {
    console.log(e);
  }
  render() {
    return <button onClick={this.handleClick}>Test</button>
  }
}

箭头函数

import React, { Component } from 'react';

class App extends Component {
  const handleClick = (e) => {
    console.log(e);
  };
  render() {
    return <button onClick={this.handleClick}>Test</button>
  }
}

import React, { Component } from 'react';

class App extends Component {
  handleClick(e) {
    console.log(e);
  }
  render() {
    return <button onClick={ () => this.handleClick() }>Test</button>
  }
}

• 尽量避免在React中混用合成事件和原生DOM事件
• React的合成事件系统只是原生DOM事件系统的一个子集，仅仅实现了DOM level 3 的事件接口，并且统一了浏览器间的兼容问题。对于无法使用React合成事件的场景，需要使用原生事件来完成
• 事件的传播与阻止事件的传播
  原生DOM事件的传播可以分为3个阶段：事件的捕获阶段，目标对象本身的事件处理程序调用以及事件冒泡

表单

• 文本框

import React, { Component } from 'react';

class App extends Component {
  construtor(props) {
    super(props);

    this.handleInputChange = this.handleInputChange.bind(this);
    this.handleTextareaChange = this.handleTextareaChange.bind(this);

    this.state = {
      inputValue: '',
      textareaValue: '',
    }
  }
  
  handleInputChange(e) {
    this.setState({
      inputValue: e.target.value,
    });
  }
  
  handleTextareaChange(e) {
    this.setState({
      textareaValue: e.target.value,
    });
  }

  render() {
    const { inputValue, textareaValue } = this.state;
    return {
      <div>
        <p>single input: <input type="text" value={inputValue}
          onChange={this.handleInputChange} /></p>
        <p>mulitiInput: <textarea value={textareaValue}
          onChange={this.hanleTextareaChange /></p>
      </div>
    );
  }
}