this.props는 반응 컴포넌트 내에서 화살표 함수에서 정의되지 않은 것으로 표시됩니다.

Question

화살표 함수를 사용하여 반응 컴포넌트 내에서 this을 바인딩합니다. 아래 handleChange() 기능을 참조하십시오. 화살표 함수 안에 중단 점을 넣을 때 매우 이상한 것을 발견했습니다 : this이 정의되었지만 this.props은 undefined입니다. 이 모든에도 불구하고 this.props.onChange() 제대로 호출됩니다! 이 이상한 행동에 대한 설명이 있습니까?

class MyComponent extends React.Component { 
    render() { 
     const { someProp } = this.props; 

     // <TextField> is an input component from Material UI library 
     return (
      <TextField 
       onChange={this.handleChange} 
      /> 
     ); 
    } 

    handleChange = event => { 
     const value = event.target.value; 
     this.props.onChange(value); 
    }; 
} 

P. 반면에 render() 메서드는 정상적으로 작동합니다. 즉 this.props이 정의됩니다. 당신이 바벨의 속임수되고있어,하지 않는 것보다

_this.handleChange = function(event) { 
    var value = event.target.value; 
    _this.props.onChange(value); 
} 

Answer 1

가능성 :

업데이트

여기 바벨에 의해 생성 된 transpiled 코드입니다.

당신은 사전 바벨 - < 2017의 transpilled 코드를 사용하고 있기 때문에 : method 내

var A = function A() { 
    var _this = this; 

    this.method = function() { 
    _this.prop.a(); 
    }; 
}; 

위의 코드를 보면, 모두 _this 및 this :

class A { 
    method =() => { 
    this.prop.a(); 
    }; 
} 

것 look something like을 (this in a function called as a method of an object binds to that object) 때문에 클래스 인스턴스를 가리키고 있습니다.

그러나 JS this은 dynamic property이므로 코드를 읽음으로써 예측 가능한 방식으로 값을 정적으로 결정할 수는 없습니다. 우리는 그것을 실행해야합니다.

즉, this 안에있는 handleChange은 반드시 this과 같을 필요는 없습니다. 그것은 handleChange이 어떻게 호출되는지에 달려 있습니다. 그러나, 아무리 우리가 handleChange를 호출하는 방법, _this는 (따라서 하나의 바벨이 작업을 수행하는 이유 이유) 특정 코드에서

영향을받지 않을 것이다, 당신은에 this를 오버라이드 (override) 할, TextField의 onChange 이벤트 핸들러에 handleChange을 전달하는 기본값은 undefined입니다.

은 (calling the handler as a plain function에 의해) 이벤트 핸들러 undefined에 컨텍스트를 무시 반작용 :

ReactDOM.render(
 
    <input onChange={logThis} placeholder="Start typing" />, 
 
    document.querySelector('#example') 
 
) 
 

 
function logThis() { 
 
    console.log(this); 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> 
 
<div id="example"></div>

이 _this 여전히 가리키는 그것에 동안 handleChange에, this가 어떤 TextField 세트에 구속되는 것을 의미 MyComponent의 인스턴스

따라서 _this이 올바르므로 모든 것이 계속 작동하지만 this은 대체로 undefined입니다.