의 이유 바인드 (이)를 사용해야합니다 이벤트 핸들러 반응

1.JavaScript 자신의 특성 설명

당신이 변수에 함수 이름을 전달하는 경우는 내부적으로 다음이 지점이 손실됩니다이 방법을 사용하는 경우, 다음, 함수 이름 () 방식으로했다.

먼저 우리는 테스트 개체를 만들고 직접 메소드를 호출합니다

1 개  CONST의 테스트 = {
 2      이름 : ' 잭 ' ,
 3      getName : 함수 () {
 4          CONSOLE.LOG ( 이 .name을)
 5      }
 6  }
 7 test.getName ()

출력 단자입니다.

그 후, 우리는 코드를 조정합니다

1 개  CONST의 테스트 = {
 2      이름 : ' 잭 ' ,
 3      getJack : 함수 () {
 4          CONSOLE.LOG ( 이 .name을)
 5      }
 6  }
 7  CONST FUNC = test.getJack;
8 FUNC ();

다음 중간 변수 () 메서드 호출을 사용하여, 우리는 직접 객체의 메소드를 호출하지 않았지만,이 방법은 중간 변수를 선언,이 지점이 손실, 출력 정의되지 않은, 노드 환경이 출력 노드 JS 파일 정보를 수행하는 경우, 그것은 HTML에 포함 된대로 이 시점 window 객체 .

2.React 이벤트 바인딩
, 즉 케이스 중간 변수를 온 클릭 : JSX이 문자열이 아닌 이벤트 전달에 위의 원리와 결합 일치하게 반응하지만, 함수는 (온 클릭은 = {this.handleClick}이 예) 그래서이 시점의 핸들러가 손실됩니다. 이 문제를 해결하기 위해 이벤트 핸들러는 전달 방법에 상관없이,이 점은 개체의 현재 인스턴스가되도록, 함수 바인딩 (이)를 호출 할 때입니다.
당신이 바인드 (이)을 사용하지 않으려면 물론, 우리는 화살표 함수의 기능을 선언 할 때 변수에 함수의 내용을 반환합니다 사용하고이 직접 호출. 변수 이름을 사용할 수 있습니다. 다음 샘플 코드는 다음과 같습니다

1 개 가져 오기 반작용 에서  ' 반응 ' ;
2 수출 기본  클래스 인생은 React.Component를 확장 {
 3      생성자 (소품) {
 4          초 (소품);
(5)          이 .STATE = {
 6              횟수 : 4 
(7)          };
8      }
 9      렌더링 () {
 10          var에 스타일 = {
 (11)              패딩 : ' 10px ' ,
 12              색상 : ' 빨간색 ',
 13이고              fontSize는이 : " 30 픽셀 ' 
14          }
 15          창 (
 16              <div 스타일의 스타일 = {}> { / * 주의 JS {} 문법 개의 브래킷 스타일, 브래킷을 나타내는데 사용되지만, 실제로 물체의 이유이다 * / }
 . 17                  <P> 반응주기를 설명 </ P>
 (18)는                  <버튼의 onclick = { 이 본 .handleAdd}> 클릭 </ 버튼> 결합하지
 . 19                  <버튼의 onclick = { 이 본 .handleClick.bind ( 이 본 )}> 클릭과 결합 다음 </ 버튼>
 20 인                  <P> { 이 본 .state.count} </ P>
21              </ div>
22          )
 23      }
 24      // 이는 오브젝트의 현재 인스턴스를 참조 이때 
25      handleAdd = () => {
 26은          CONSOLE.LOG ( 이 )
 (27)          이 .setState ({
 28              : COUNT . 5 
(29)          )}
 (30)      }
 (31)는      () {handleClick
 32          은이 .setState ({
 33 인              COUNT : . 6 
34          })
 35      }
 36 }

----------------
면책 조항 :이 문서에 원래 문서 CSDN 블로거 "왕 ZHE _Jack"는 것입니다
은 https : //blog.csdn.net/qq_34829447/article 원래 링크 / 세부 / 81705977