2017-01-14 7 views
1

방금 ​​React와 JavaScript를 배우기 시작했습니다. 모두 handleClickrender 기능은 클래스의 this 객체를 사용하나의 함수가 바인딩을 필요로하고 다른 함수가 왜 필요하지 않습니까?

class Toggle extends React.Component { 
    constructor(props) { 
     super(props); 
     this.state = {isToggleOn: true}; 
     this.handleClick = this.handleClick.bind(this); 
    } 

    handleClick() { 
     this.setState(prevState => ({ 
      isToggleOn: !prevState.isToggleOn 
     })); 
    } 

    render() { 
     return (
      <button onClick={this.handleClick}> 
       {this.state.isToggleOn ? 'ON' : 'OFF'} 
      </button> 
     ); 
    } 
} 

내가보기 :
튜토리얼을 통해가는 동안, 나는 토글 버튼을 생성하는 구성 요소의 예제 코드에 도착 범위 밖 (오른쪽?)

그럼 왜 단지 handleClick에 바인딩하면됩니까?

+0

나는 react를 사용하지는 않았지만,'onClick' 함수 호출은'this' 키워드를'window' 객체 또는 비슷한 것으로 대체합니다. 이것은 실제로'this' ='window'로 콜백을 호출하는 기본'addEventListener' 메쏘드에서 발생합니다. 아마도'handeClick'이'window'에 의해 호출 되었기 때문에,'this' 키워드는'window'에 의해 덮어 쓰여지지 않도록, 또는 click 함수를 호출하는 누군가에 의해 덮어 쓰여지지 않아야합니다. – Cristy

답변

1

모든 반응 클래스에서 componentWillMount, componentDidMount, render 등의 함수는 요소를 렌더링하는 동안 내부적으로 반응하여 호출되며 이러한 메서드는 절대로 호출하지 않습니다.

이제 호출하는 동안 범위가 결정되었으므로 해당 메서드를 적절한 범위로 호출/바인딩 할 수 있습니다. 따라서 이러한 함수에 대해 신경 쓸 필요가 없습니다.

위의 예제에서 handleClick과 같은 다른 함수는 우리가 만든 메소드이며 반응은 그것에 대해 아무 것도 모릅니다. 또한이 메소드의 호출은 우리에 의해 정의됩니다 (즉, 버튼을 클릭 할 때). 그래서 여기에 올바른 방법으로이 메소드를 호출하거나 바인드하는 것이 우리의 임무입니다.

위의 예에서는 handleClick 및 not render 함수 만 바인딩하는 이유입니다.

2

Javascript는 정의 할 때가 아니라 호출 할 때 범위를 지정합니다. bind()handleClick() 클래스에 메서드가 필요하므로 템플릿에서 호출 할 때 여전히 this을 통해 클래스의 범위에 액세스 할 수 있습니다.

반응 템플릿은 자바 스크립트 함수로 컴파일되므로, bind()이 아니라면 onClick={this.handleClick} 핸들러는 호출 한 템플릿 함수로 범위가 지정됩니다. 귀하의 경우 클릭 한 버튼을 나타냅니다.

이벤트 처리기가 this을 참조하지 않은 경우 바인딩이 필요하지 않지만 this.setState()을 호출하기 때문에 처리기가 클래스 범위를 인식하도록 유지해야합니다.

+0

그렇지 않으면 '이'는 이벤트를 발생시킨 버튼을 나타냅니다. – sweaver2112

+0

@ sweaver2112 감사합니다. 더 명확하게 답변을 업데이트했습니다. – Soviut

+0

'render()'는 버튼이 아닌 "템플릿 함수"라고하지 않습니까? 그리고'render()'는 같은 클래스에 있으므로 같은 'this'를 공유 할 예정입니까? – user3134477

관련 문제