标签：count React render 抽离 react state 处理程序 JSX

将逻辑抽离到单独的方法中，保证JSX结构清晰

事件绑定this指向

1.箭头函数

　　利用箭头函数自身不绑定this的特点

//1. 导入react
import React from 'react';
import ReactDOM from 'react-dom';

/*
  从JSX中抽离事件处理程序
*/

class App extends React.Component {
  state = {
    count: 0,
    test: 'a'
  }

  //事件处理程序
  onIncrement() {
    console.log('事件处理程序中的this:', this)
    this.setState({
      count: this.state.count + 1
    })
  }

  render () {
    return (
      <div>
        <h1>计数器：{this.state.count}</h1>
        <button onClick={() => this.onIncrement()}>+1</button>
        {/* <button onClick={this.onIncrement}>+1</button> */}
      </div>
    )
  }
}

//渲染组件
ReactDOM.render(<App />, document.getElementById('root'))

2.Function.prototype.bind()

//1. 导入react
import React from 'react';
import ReactDOM from 'react-dom';

/*
  从JSX中抽离事件处理程序
*/

class App extends React.Component {
  

  constructor() {
    super()

    this.state = {
      count: 0
    }

    this.onIncrement = this.onIncrement.bind(this)
  }

  //事件处理程序
  onIncrement() {
    console.log('事件处理程序中的this:', this)
    this.setState({
      count: this.state.count + 1
    })
  }

  render () {
    return (
      <div>
        <h1>计数器：{this.state.count}</h1>
        <button onClick={this.onIncrement}>+1</button>
      </div>
    )
  }
}

//渲染组件
ReactDOM.render(<App />, document.getElementById('root'))

3.class的实例方法

　　利用箭头函数形式的class实例方法

//1. 导入react
import React from 'react';
import ReactDOM from 'react-dom';

/*
  从JSX中抽离事件处理程序
*/

class App extends React.Component {
  

  state = {
      count: 0
    }

  //事件处理程序
  onIncrement = () => {
    console.log('事件处理程序中的this:', this)
    this.setState({
      count: this.state.count + 1
    })
  }

  render () {
    return (
      <div>
        <h1>计数器：{this.state.count}</h1>
        <button onClick={this.onIncrement}>+1</button>
      </div>
    )
  }
}

//渲染组件
ReactDOM.render(<App />, document.getElementById('root'))

标签：count,React,render,抽离,react,state,处理程序,JSX
来源： https://www.cnblogs.com/wsl56/p/15523412.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。