React事件处理超详细介绍

import React, { Component } from 'react'
// 函数组件中没有this指向问题
const App = () => {
  let num = 1
  const clickFn = () => {
    console.log(num++)
  }
  // const clickFn = () => () => {
  //   console.log(num++)
  // }
  return (
    <div>
      {/* 普通的值，它不具备响应式，所以你修改数据后，视图是不会更新的 */}
      <h3>App组件 -- {num}</h3>
      {/* 绑定点击事件 */}
      {/* 一般情况下，绑定的实现方法是不会加小括号，如果要加小括号，则定义绑定方法时，一定要返回一函数 */}
      <button onClick={clickFn}>++++</button>
      {/* <button onClick={clickFn()}>++++</button> */}
    </div>
  )
}
export default App

import React, { Component } from 'react'
class App extends Component {
  num = 100
  todos = []
  // 建议使用箭头函数定义成员属性
  addNum = () => {
    // 同步修改成员属性中的数据，但是视图不更新
    this.num++
    // 类组件中提供一个方法，可以强制让视图更新
    this.forceUpdate()
  }
  // react事件，在没有写小括号的时候会主动的把event对象传给你
  onEnter = evt => {
    if (evt.keyCode === 13) {
      this.todos.push({
        id: Date.now(),
        title: evt.target.value.trim(),
        done: false
      })
      evt.target.value = ''
      // 通知视图更新
      this.forceUpdate()
    }
  }
  render() {
    return (
      <div>
        <h3>{this.num}</h3>
        <ul>
          {this.todos.map(item => (
            <li key={item.id}>{item.title}</li>
          ))}
        </ul>
        {/* 
          类组件中绑定方法，有this指向问题
        */}
        <button onClick={this.addNum}>++++</button>
        <input type="text" onKeyUp={this.onEnter} />
      </div>
    )
  }
}
export default App

import React, { Component } from 'react';
class App extends Component {
  // 在react中事件对象，它是通过事件参数传给方法的
  // 参数空着，会默认绑定事件
  fn = () => {
    console.log('fn')
  }
  // 又想传参，又想触发事件得这么写，evt会自动映射过来，注意最后一个箭头前只能是 evt 对象
  fn1 = num => evt => {
    console.log(num, evt);
  }
  // 这种写法是可以随意变更 evt 对象传参过来的位置
  fn2 = (num, evt) => {
    console.log(num, evt);
  }
  render() {
    return (
      <div>
        {/* onClick={ 注意：花括号里是函数的表达式，而不是函数的调用 } */}
        <button onClick={this.fn}>绑定点击事件</button>
        <button onClick={this.fn1(100)}>绑定点击事件</button>
        <button onClick={evt => this.fn2(200, evt)}>绑定点击事件</button>
      </div>
    );
  }
}
export default App;

import React, { Component } from 'react';
class App extends Component {
  num = 100
  // 类的构造函数，它只执行1次，在初始化
  // constructor(props) {
  //   super(props);
  //   // 在构建函数中统一的把事件方法this绑定好
  //   this.addNum = this.addNum.bind(this)
  // }
  // 在react事件绑定的类组件中，默认情况this指向会可能存在指向问题  undefined
  // 在绑定事件中绑定this调用函数时的写法
  addNum(n = 1) {
    this.num += n
    this.forceUpdate()
  }
  // 构造函数中绑定this调用函数时的写法，因为不传值第一个参数会
  // addNum(evt, n = 1) {
  //   this.num += n
  //   this.forceUpdate()
  // }
  render() {
    return (
      <div>
        <h3>{this.num}</h3>
        {/* 在此处可以使用bind来绑定this指向(this指向 App 实例),且还可以传参数 */}
        {/* 此方案在使用中，较多 */}
        {/* <button onClick={this.addNum.bind(this)}>累加</button> */}
        <button onClick={this.addNum.bind(this, 2)}>累加</button>
        {/* 如果你这样写，又想this指向对，则一定要在构造函数中，解决好this指向 */}
        {/* <button onClick={this.addNum}>累加</button> */}
      </div>
    );
  }
}
export default App;

import React, { Component } from 'react';
class App extends Component {
  num = 100
  // 类的构造函数，它只执行1次，在初始化
  // constructor(props) {
  //   super(props);
  //   // 在构建函数中统一的把事件方法this绑定好
  //   this.addNum = this.addNum.bind(this)
  // }
  // 在react事件绑定的类组件中，默认情况this指向会可能存在指向问题  undefined
  // 在绑定事件中绑定this调用函数时的写法
  addNum(n = 1) {
    this.num += n
    this.forceUpdate()
  }
  // 构造函数中绑定this调用函数时的写法，因为不传值第一个参数会
  // addNum(evt, n = 1) {
  //   this.num += n
  //   this.forceUpdate()
  // }
  render() {
    return (
      <div>
        <h3>{this.num}</h3>
        {/* 在此处可以使用bind来绑定this指向(this指向 App 实例),且还可以传参数 */}
        {/* 此方案在使用中，较多 */}
        {/* <button onClick={this.addNum.bind(this)}>累加</button> */}
        <button onClick={this.addNum.bind(this, 2)}>累加</button>
        {/* 如果你这样写，又想this指向对，则一定要在构造函数中，解决好this指向 */}
        {/* <button onClick={this.addNum}>累加</button> */}
      </div>
    );
  }
}
export default App;