React中事件的类型定义方式
作者：Pandy : )
这篇文章主要介绍了React中事件的类型定义方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
React事件的类型定义
基本的事件类型
React 搞了一套自己的事件类型，所以你没办法使用 TypeScript 内置提供的 MouseEvent 等等。在需要定义事件类型的时候，需要从 React 中导入：
import React, { Component, MouseEvent } from 'react';
export class Button extends Component {
handleClick(event: MouseEvent) {
event.preventDefault();
alert(event.currentTarget.tagName); // alerts BUTTON
}
render() {
return (
<button onClick={this.handleClick}>
{this.props.children}
</button>
);
}
}React 提供的事件类型有：
AnimationEventChangeEventClipboardEventCompositionEventDragEventFocusEventFormEventKeyboardEventMouseEventPointerEventTouchEventTransitionEventWheelEvent
还有一个 SyntheticEvent，用于其他所有的事件。
限制性的事件类型
如果需要限制事件类型，可以利用事件类型的泛型：
import React, { Component, MouseEvent } from 'react';
export class Button extends Component {
/*
* 这里我们将 handleClick 限制只能是在 HTMLButton 元素上
*/
handleClick(event: MouseEvent<HTMLButtonElement>) {
event.preventDefault();
alert(event.currentTarget.tagName); // alerts BUTTON
}
/*
* 支持联合类型
*/
handleAnotherClick(event: MouseEvent<HTMLButtonElement | HTMLAnchorElement>) {
event.preventDefault();
alert('Yeah!');
}
render() {
return <button onClick={this.handleClick}>
{this.props.children}
</button>
}
}这里的限定的类型是 TypeScript 提供的 DOM 元素类型。
React四种定义事件方式
事件本身处的位置是一个属性 如果属性的值是一个函数
使用{}包裹，一定要保证该函数内的this指向
import React, { Component } from 'react';
export default class App extends Component {
constructor(props) {
super(props);
this.add1000Fn = this.add1000.bind(this)
}
state = {
count:1
}
add10 = () => {
this.setState({count:this.state.count + 10})
}
add100 = function() { // 一般写为 add100 () {} 二者是等价的
console.log(this);
this.setState({count:this.state.count + 100})
}
add1000() {
this.setState({count:this.state.count + 1000})
}
render() {
return (
<>
<div>count:{ this.state.count}</div>
{/* 1.事件定义方式1:直接在render里写行内的箭头函数 */}
<button onClick={ ()=>{
//如果该函数使用声明式 function(){} 内部的this指向为undefined
this.setState({count:++this.state.count})
}}>加一</button>
{/* 2.事件定义方式2:在组件内使用箭头函数定义的一个方法 */}
<button onClick={this.add10}>加十</button>
{/* 3.事件定义方式3:直接在组件内定义一个非箭头函数的方法，然后在render里直接使用`onClick={this.handleClick.bind(this)}` */}
<button onClick={ this.add100.bind(this)}>加一百</button>
{/* 4.事件定义方式4: 直接在组件内定义一个非箭头函数的方法，然后在constructor里bind(this)*/}
<button onClick = { this.add1000Fn }>加1000</button>
</>
);
}
}总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。