日本免费高清视频-国产福利视频导航-黄色在线播放国产-天天操天天操天天操天天操|www.shdianci.com

學無先后，達者為師

網站首頁 編程語言 正文

React中事件的類型定義方式_React

作者：Pandy?:?) ? 更新時間： 2022-12-29 編程語言

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 提供的事件類型有：

  • AnimationEvent?
  • ChangeEvent?
  • ClipboardEvent?
  • CompositionEvent?
  • DragEvent?
  • FocusEvent?
  • FormEvent?
  • KeyboardEvent?
  • MouseEvent?
  • PointerEvent?
  • TouchEvent?
  • TransitionEvent?
  • WheelEvent

還有一個 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>
            </>
        );
    }
}

總結

原文鏈接：https://blog.csdn.net/YopenLang/article/details/125910670

欄目分類
最近更新