값은 함수

Question

export default class DetailsPage extends React.PureComponent { 
constructor() { 
    super(); 
    this.state = { 
     data: '', 
     isModalOpen: false, 
    }; 

    **//this.openModal = this.openModal.bind(this);** 
    } 
openModal() { 
     console.log(this, "this in Handler"); 
    this.setState({ isModalOpen: true }); 
} 

closeModal() { 
    this.setState({ isModalOpen: false }); 
} 

케이스 1 (없음 클릭 핸들러에 바인딩)

render() { 

    return (

     (<div className="left"> 

       <button className="btn btn btn-primary" type="button" 
       onClick={this.openModal}>Edit</button> 
     </div> 
     ); 
    ) 
    } 
} 

케이스 2 (이 바인딩)

결합없이 반작용

render() { 

    return (

     (<div className="left"> 

       <button className="btn btn btn-primary" type="button" 
       onClick={this.openModal.bind(this)}>Edit</button> 
     </div> 
     ); 
    ) 
    } 
} 

내 클릭 핸들러 openModal() 글자 : console.log(this)

사례 1의 경우 : "THIS"의 값이 반응에서 NULL이됩니다.

사례 2 : "THIS"의 값이 구성 요소의 값으로 나타납니다 (완벽하게 정상입니다).

내 의심 :

1. 이유는 무엇입니까 "이"첫 번째 경우에 NULL 나옵니다.

2. 에 super()의 용도는 무엇입니까? 나는 그것에 대해 읽었고 우리가 super()을 제거하고 super() & super (소품)의 차이를 제거하면 어떻게되는지 알게되었습니다. 그러나 super()으로 전화를 걸어 배경에서 발생하는 기능을 알고 싶습니다. pros and cons 항상이 일을 할 수있다,주의해야로서

   class Foo extends React.Component { 
       someMethod =() => { 
        // "this" is bound automatically! 
        console.log(this, "this in Handler"); 
        this.setState({ isModalOpen: true }); 
       } 
   } 
   

   - :하지만 내 마음에 드는 아마 ES2015 화살표 함수 구문입니다 -

Answer 1

이 질문은 질문과 variety of ways에 답있다 가장 자주 인용되는 것은 "공연"입니다. 트위터 전쟁은 이것으로 싸웠지만, IMO Ryan Florence (React Router의 공동 저자) said it best.