事件

React的事件与html dom的事件类似，有以下两点不同：

• 命名

  React 事件采用驼峰式的命名，例如：

   <div onClick={/* */}></div>
  

  • 语法

    React 事件实现方式是jsx，并不是html dom的字符串。例如：

    <div onClick={() => console.log('clicked me')}></div>
    

this的绑定

在React class中，默认不会将this绑定到方法中，所以需要手动绑定this到函数中，否则函数中是无法使用this的。

• bind

  我们将定义好的函数在construtor中通过bind方法绑定。示例：

   class extend React.Component {
     constructor(props) {
       super(props);
       this.state = {color: 'red'};
       this.myClick = this.myClick.bind(this);
     }
  
     render() {
       return (
         <div onClick={this.myClick}></div>
       )
     }
  
     myClick() {
       console.log(this.state.color);
     }
   }
  

• 箭头函数

  直接使用箭头函数。示例：

   class extend React.Component {
     constructor(props) {
       super(props);
       this.state = {color: 'red'};
     }
  
     render() {
       return (
         <div onClick={() => this.myClick()}></div>
       )
     }
  
     myClick() {
       console.log(this.state.color);
     }
   }
  

事件参数

示例：

   <button onClick={(e) => this.myClick(id, e)}>Delete Row</button>
   <button onClick={this.myClick.bind(this, id)}>Delete Row</button>

合成事件

React中的事件都是合成事件，不是原生的事件。

合成事件是一个事件池，这样可以复用事件。

合成事件是通过冒泡的方式注册到document上的。

合成事件支持所有原生事件，使用时用驼峰命名就可以了。

合成事件与原生事件的实例：

    class extends React.Component {
      componentDidMount() {
        document.querySelector(".button").addEventListener("click", () => {
          this.onDomClick();
        });
      }
      onDomClick() {
        console.log("Javascript Dom click");
      }
      onReactClick() {
        console.log("React click");
      }
      render() {
        return (
          <div>
            <button className="button" onClick={() => this.onReactClick()}>
              点击
            </button>
          </div>
        );
      }
    }

结果：

    Javascript Dom click
    React click

在线示例

如果不想使用合成事件，可以通过event.persist()方法实现。