이 코드가 React JSX 에서 작동 하지만 HTML 에서는 작동하지 않는 이유 :
아래 코드는 태그의 속성 일뿐입니다. . 함수 handleClick 그냥 console.log 표시
이 코드는 React JSX 코드 에서 작동 합니다.
onClick={() => this.props.handleClick(1)}
이것은 HTML 에서 작동하지 않습니다 .
onclick={() => handleClick(1)}
handleClickReact JSX의 다른 함수에 함수를 넣어야하는 이유는 무엇 입니까?
이 질문에 답하려면 더 많은 컨텍스트가 필요합니다.
HTML에서 작동하지 않는 이유는 무엇입니까?
onclick={() => handleClick(1)}
이것은 onclick함수 속성 이기 때문에 VanillaJS에서 작동하지 않습니다 .하지만 단순히 함수 속성을 새로운 함수로 덮어 쓸 수 있습니다onclick :
someButton.onclick = () => handleClick(1); // Warning: this will replace any existing `onclick` function property.
사실, 이것은 JavaScript 프로그래머가 동일한 이벤트에 여러 이벤트 핸들러를 addEventListener추가하기 위해 사용한 방법입니다. DOM에 추가되고 지원이 널리 보급되었습니다 (2000 년대 후반).
var currentOnClick = someButton.onclick;
someButton.onclick = function( e ) {
if( currentOnClick ) currentOnClick( e );
// do stuff
};
물론 공식적인 방법은 DOM의 addEventListener기능 을 사용하는 것입니다.
someButton.addEventListener( 'click', handleClick.bind(this) );
// or:
someButton.addEventListener( 'click', () => handleClick(1) );
// or:
someButton.addEventListener( 'click', e => handleClick(1) );
자바 스크립트의 이벤트 처리 코드를 더 간결하게 만들고 싶다면 패치 EventTarget(부모 유형 addEventListener) :
Object.defineProperty( EventTarget.prototype, 'onclick2', {
get() {
if( typeof this.onclickHandlers == 'undefined' ) {
this.onclickHandlers = [];
}
return this.onclickHandlers;
}
set( handlerFunc ) {
if( typeof this.onclickHandlers == 'undefined' ) {
this.onclickHandlers = [];
}
this.onclickHandlers.push( handlerFunc );
this.addEventListener( 'click', handlerFunc );
}
} );
용법:
someButton.onclick2 = () => doSomething();
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다