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;