react事件

react事件

特点：

1. 绑定事件的命名（驼峰命名法）
2. {}里面传入函数，而不是字符串

<button onClick={this.sendData}>传递msg到父元素</button>

注意：react返回的对象是代理的原生的事件对象，如果要查看事件对象的具体值，可以输出对象的属性

3. 原生中阻止默认行为时，可以直接返回return false，但是react中，阻止默认必须使用e.preventDefault()

  render() {
    return (
      <div>
        <form action="http://www.baidu.com">
          <div className="child">
            <h1>hello</h1>
            <button onClick={this.parentEvent}>提交</button>
          </div>
        </form>
      </div>
    )
  }
  parentEvent = (e) => {
    console.log(e)
    e.preventDefault()
  }

4. react事件传参数

  render() {
    return (
      <div>
        {/* ES6方式 传递多个参数*/}
        <button onClick={(e)=>{this.parentEvent('msg:hello',e)}}>提交</button>
        {/* 不使用ES6方式 */}
        <button onClick={function(e){this.parentEvent('msg:hello',e)}.bind(this)}>提交</button>
      </div>
    )
  }
  parentEvent = (msg,e) => {
    console.log(msg,e)
  }

注意：bind在声明时候用，call、apply在调用时候用