화살표 기능을 사용하려면 어떻게해야합니까?

Question

ES6 주위에 내 머리를 얻는 방법과 화살표 함수를 만드는 궁금되었다 할 수 있습니다 디버깅 :

나는이 트리거되었는지의 여부를 확인하기 위해 여기에 CONSOLE.LOG을 넣을 수있는 방법

<button onClick={() => this.setState({open: !open})}>Toggle</button> 

?

Answer 1

코드 블록이있는 화살표 함수에 중괄호 {}을 사용하십시오.

<button onClick={() => {console.log('hello');this.setState({open: !open})}}>Toggle</button> 

는

<button onClick={() => { 
     console.log('hello'); 
     this.setState({open: !open}) 
    }}> 
     Toggle 
    </button> 

이 도움이 희망을 포맷!

Answer 2

그럼 당신은 console.logs 및 상태를 설정하는 별도의 함수를 호출 할 수 있습니다 :

<button onClick={this.potato}>Toggle</button> 

function potato() { 
    console.log('bombs away'); 
    this.setState({open: !open}) 
} 

아니면 상태를 업데이트 할 때마다 트리거 이후는, 렌더링 기능에 인쇄 문을 넣을 수 다시 렌더링

Answer 3

코드가 유효하지 않습니다. HTML. onClick 속성의 값은 문자열이어야합니다, 그래서 단순히 아무것도하지 않습니다 함수 선언을 실행하기 때문에

<button onClick="() => this.setState({open: !open})">Toggle</button> 

그러나, 이것은 또한, 아무것도하지 않습니다해야합니다. 당신은 아마 지금은 console.log A의 부착이 용이 충분

<button onClick="this.setState({open: !open})">Toggle</button> 

를 원하는 :

<button onClick="console.log("here!"); this.setState({open: !open})">Toggle</button> 

은 물론, 당신은 어쨌든 일이 방법을 수행하지 않는 것이 좋습니다. 이벤트 핸들러를 설정하려면 addEventListener을 사용해야합니다. 다른 답변에서 언급 한대로, handler에 CONSOLE.LOG를 추가하려면 그래서

const handler =() => this.setState({open: !open}); 
button.addEventListener('click', handler); 

을 수, 당신이 중 하나를 수행 할 수 있습니다 (괄호없이) 간결한 몸의 형태 포기 :

const handler =() => { console.log("here"); this.setState({open: !open}); }; 

을

이

const handler =() => (console.log("here"), this.setState({open: !open})); 

다음 관용구가 유용 일도있다 :

일반적으로 권장되지는 않았지만 또는, 당신은 쉼표 연산자를 사용할 수 있습니다

const handler =() => console.log("here") || this.setState({open: !open}); 

console.log이 undefined을 반환하기 때문에 작동합니다. 이렇게하면 중괄호와 괄호를 고칠 걱정없이 문자 console.log("here") ||을 삭제하면 로그를 제거 할 수 있습니다.