React事件監(jiān)聽的代碼怎么寫

這篇文章主要介紹“React事件監(jiān)聽的代碼怎么寫”的相關(guān)知識，小編通過實(shí)際案例向大家展示操作過程，操作方法簡單快捷，實(shí)用性強(qiáng)，希望這篇“React事件監(jiān)聽的代碼怎么寫”文章能幫助大家解決問題。

方法一：在constructor中使用bind綁定，改變this的指向，代碼如下：

import React, { Component } from 'react';
export default class Group extends Component {
  constructor(props) {
    super(props);
    this.state = {
      show: true,
      title: '大西瓜'
    };
    // 寫法一：事件綁定改變this指向
    this.showFunc = this.showFunc.bind(this);
  }
  // 調(diào)用該方法
  showFunc() {
    this.setState({
      show: false
    });
  }
  render() {
    let result = this.state.show ? this.state.title : null;
    return (
      <div>
        <button onClick={this.showFunc}>觸發(fā)</button>
        {result}
      </div>
    );
  }
}

方法二：通過箭頭函數(shù)改變this指向，代碼如下：

import React, { Component } from 'react';
export default class Group extends Component {
  constructor(props) {
    super(props);
    this.state = {
      show: true,
      title: '大西瓜'
    };
  }
  // 第二種，通過箭頭函數(shù)改變this指向
  showFunc = () => {
    this.setState({
      show: false
    });
  };
  render() {
    let result = this.state.show ? this.state.title : null;
    return (
      <div>
        <button onClick={this.showFunc}>觸發(fā)</button>
        {result}
      </div>
    );
  }
}

方法三：直接使用箭頭函數(shù)改變this的指向，代碼如下：

import React, { Component } from 'react';
export default class Group extends Component {
  constructor(props) {
    super(props);
    this.state = {
      show: true,
      title: '大西瓜'
    };
  }
  // 調(diào)用該方法
  showFunc() {
    this.setState({
      show: false
    });
  }
  render() {
    let result = this.state.show ? this.state.title : null;
    return (
      <div>
        <button onClick={() => this.showFunc()}>觸發(fā)</button>
        {result}
      </div>
    );
  }
}

關(guān)于“React事件監(jiān)聽的代碼怎么寫”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識，可以關(guān)注億速云行業(yè)資訊頻道，小編每天都會為大家更新不同的知識點(diǎn)。