组件化开发-06-事件处理——基本用法-onClick & 阻止元素默认行为-e.preventDefault()& 关于事件函数的this处理-使用箭头函数& 给事件函数传递参数用法-onClick

事件处理——基本用法-onClick & 阻止元素默认行为-e.preventDefault() & 关于事件函数的this处理-使用箭头函数 & 给事件函数传递参数用法-onClick

• 事件绑定方式

// handle为函数名称
<button onClick={this.handle}>点击</button>

class TestEvent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      num: 0
    }
  }
  handle = () => {
    // console.log('nihao')
    this.setState({
      num: this.state.num + 1
    })
  }
  render() {
    return (
      <div>
        <div>事件处理</div>
        <div>{this.state.num}</div>
        <button onClick={this.handle}>点击</button>
      </div>
    )
  }
}

• 不能使用return false的方式阻止默认行为，必须使用preventDefault

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

• React的事件对象是合成对象，没有兼容问题

• 事件函数中的this问题

  • 在构造函数中绑定

    this.handle = this.handle.bind(this)
    handle = function () {
      console.log(this)
    }
    

  • 使用箭头函数

    handle = () => {
      vthis.setState({
        num: this.state.num + 1
      })
    }
    

• 事件传参

let tagList = this.state.list.map(item => {
  // return <li onClick={this.handleItem.bind(this, item.id)} key={item.id}>{item.bname}</li>
  // return <li onClick={(e) => {this.handleItem(item.id, e)}} key={item.id}>{item.bname}</li>
  return <li data-id={item.id} onClick={(e) => {this.handleItem(item.id, e)}} key={item.id}>{item.bname}</li>
})

实例

第一步：src下新建文件夹components，下面新建07.js

/*
  事件处理
*/
import React from 'react'

class TestEvent extends React.Component {
  constructor (props) {
    super(props);
    this.state = {
      num: 1
    }
    // 对于普通事件函数需要进行如下绑定
    this.testThis = this.testThis.bind(this)
  }
  handle = () => {
    this.setState({
      num: 2
    })
  }
  handleJump = (e) => {
    console.log(e)
    // 事件对象e并不是标准的元素DOM事件对象，而是React自己合成的一个事件对象，但是兼容原生事件对象，并且没有浏览器兼容问题
    // 阻止a标签的默认行为
    // 如下的方式无法做到
    // return false;
    // 必须使用如下方式才可以
    e.preventDefault()
  }
  testThis () {
    // 默认情况下，普通函数中的this是undefined
    console.log(this)
  }
  // testThis = function () {
  //   console.log(this)
  // }

  // handleParam = (a, b, e) => {
  //   console.log(a, b)
  //   console.log(e.target.tagName)
  // }

  handleParam = (e) => {
    console.log(e.target.tagName)
    console.log(e.target.dataset.msg)
    console.log(e.target.dataset.info)
  }
  render () {
    return (
      <div>
        <div>事件处理</div>
        <div>
          <div>{this.state.num}</div>
          <button onClick={this.handle}>点击</button>
          <a href="http://baidu.com" onClick={this.handleJump}>百度</a>
        </div>
        <div>
          <button onClick={this.testThis}>测试this</button>
        </div>
        <div>
          {/*<button onClick={this.handleParam.bind(this, 'tom', 'jerry')}>测试参数传递</button>*/}
          {/*<button onClick={(e) => {this.handleParam('spike', 'kitty', e)}}>测试参数传递</button>*/}
          <button data-msg='tom' data-info='jerry' onClick={this.handleParam}>点击</button>
        </div>
      </div>
    )
  }
}

export default TestEvent

第二步：App.js中进行引入

import React from 'react';
import './App.css';
import TestEvent from './component/07-事件处理'

function App () {
  return (
    <div>
      <TestEvent/>
    </div>
  )
}

export default App;

npm run start打开界面，显示