React에서 이벤트 연결this가 가리키는 세 가지 방법의 실현

1. 화살표 함수

1. 화살표 함수 자체가this에 귀속되지 않는 특징을 이용한다.
2.render () 방법의this는 구성 요소의 실례로 setState () 를 얻을 수 있습니다.

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>
              //  this ， ：render() 
                <button onClick={()=>this.onIncrement()}>+1</button>
                {/* <button onClick={this.onIncrement()}>+1</button> */}
            </div>
        )
    }
}

2.Function.proptype.bind()

1. ES5의bind 방법을 이용하여 이벤트 처리 프로그램의this와 구성 요소 실례를 연결합니다

class App extends React.Component{
    constructor() {
        super()
        //  
        this.state ={
            count: 0
        }
        //  .bind  this , , 
        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>
                {/* <button onClick={this.onIncrement()}>+1</button> */}
            </div>
        )
    }
}

3.class의 실례 방법

1. 화살표 함수 형식을 이용한class 실례 방법
2. 이 문법은 실험적인 문법이지만 babel의 존재로 직접 사용할 수 있다

class App extends React.Component{
    constructor() {
        super()
        //  
        this.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>
                {/* <button onClick={this.onIncrement()}>+1</button> */}
            </div>
        )
    }
}

이 React에서 이벤트 귀속this가 가리키는 세 가지 방법의 실현에 관한 글을 소개합니다. 더 많은 React 이벤트 귀속this가 가리키는 내용은 저희 이전의 글을 검색하거나 아래의 관련 글을 계속 보십시오. 앞으로 많은 응원 부탁드립니다!