React 事件详解

学习目标

• React事件知识

React事件特点

• 绑定事件的命名规则：驼峰命名
• 传入1个函数，而不是字符串。

<button onClick={this.sendData}>发送数据 </button>

事件对象：React返回的事件对象是代理点的原生的事件对象。如果想要查看事件对象的具体值，必须直接输出事件对象的属性。

原生：阻止默认行为时，返回false即可。React中组织默认行为必须使用e.preventDefault()

 

实例一 e.preventDefault()

import React, { Children } from 'react';
import ReactDOM from 'react-dom';
class ParenetCom extends React.Component {
  constructor(props) {
    super(props)
  }
  render() {
    return (
      <div>
          <form action="http://www.baidu.com">
            <div className="child">
                <h1>hello world</h1>
                <button onClick={this.parentEvent}>提交</button>
            </div>
          </form>
      </div>
    )
  }
  parentEvent = (e) => {
    e.preventDefault()
    //return false
  }
}
ReactDOM.render(
  <ParenetCom />, // 渲染父元素
  document.querySelector('#root') //寻找文件对象
)

实例二 箭头函数

import React from 'react';
import ReactDOM from 'react-dom';
class ParenetCom extends React.Component {
  constructor(props) {
    super(props)
  }
  render() {
    return (
      <div>
          <button onClick={this.click('123')}>提交</button>
      </div>
    )
  }
  click = (e) => {
    console.log(e)
  }
}
ReactDOM.render(
  <ParenetCom />, // 渲染父元素
  document.querySelector('#root') //寻找文件对象
)

加载页面 http://localhost:3000/ 没有点击按钮就打印123，点击按钮也不起作用。React事件要求传入一个函数，但是“this.click('123')}”的结果只是一个值，不是函数。可以通过箭头函数（传入匿名函数）

事件e通常作为最后一个参数放在参数末尾。