React中的事件处理

Maike.

已于 2022-03-10 09:53:58 修改

阅读量227

点赞数

分类专栏： React 文章标签： react.js javascript 前端

于 2022-02-22 19:36:41 首次发布

本文链接：https://blog.csdn.net/vuhtyd76/article/details/123074913

版权

React 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

一、在构造器中使用bind绑定this

import React, { useEffect, useState } from 'react';
import ReactDOM from 'react-dom';

class App extends React.Component {
  constructor(props) {
    super(props)
    this.state = { count: 0 }
    this.handleAdd = this.handleAdd.bind(this)
  }
  handleAdd() {
    this.setState({ count: this.state.count + 1 })
  }
  // 传值写法
  // handleAdd(a) {
  //   this.setState({ count: this.state.count + a })
  // }
  render() {
    return (
      <>
        <div>{this.state.count}</div>
        <button onClick={this.handleAdd}>+1</button>
        {/* 可使用下面写法来传值
        <button onClick={this.handleAdd.bind(this, 5)}>+1</button> */
      </>
    )
  }
}

ReactDOM.render(
  <App />,
  document.getElementById('root')
);

二、在回调函数中使用箭头函数

import React, { useEffect, useState } from 'react';
import ReactDOM from 'react-dom';

class App extends React.Component {
    constructor(props) {
        super(props)
        this.state = { count: 0 }
    }
    handleAdd() {
        this.setState({ count: this.state.count + 1 })
    }
    // 传值写法
    // handleAdd(a) {
    //     this.setState({ count: this.state.count + a })
    // }
    // 需要e的传值写法
    // handleAdd(a, e) {
    //     console.log(a, e);
    //     this.setState({ count: this.state.count + a })
    // }
    render() {
        return (
            <>
                <div>{this.state.count}</div>
                {/* <button onClick={() => this.handleAdd()}>+1</button> */}
                {/* 可使用下面写法来传值
                <button onClick={() => this.handleAdd(5)}>+1</button> */}
                {/* 当需要e时可以使用下面写法 */}
                {/* <button onClick={(e) => this.handleAdd(5, e)}>+1</button> */}
            </>
        )
    }
}

ReactDOM.render(
  <App />,
  document.getElementById('root')
);

三、使用类字段语法

import React, { useEffect, useState } from 'react';
import ReactDOM from 'react-dom';

class App extends React.Component {
  constructor(props) {
    super(props)
    this.state = { count: 0 }
  }
 
  handleAdd = () => {
    this.setState({ count: this.state.count + 1 })
  }

  render() {
    return (
      <>
        <div>{this.state.count}</div>
        <button onClick={this.handleAdd}>+1</button>
      </>
    )
  }
}

ReactDOM.render(
  <App />,
  document.getElementById('root')
);