반응 - 하위 이벤트가 아닌 상위 onClick 이벤트만 캡처하는 방법

반응 - 하위 이벤트가 아닌 상위 onClick 이벤트만 캡처하는 방법

다음과 같은 React 컴포넌트의 일부가 있습니다.

var headerElement = someBoolean ? <input/> : 'some string';
return <th onClick={this._onHeaderClick}>{headerElement}</th>;

그리고 클릭 핸들러로th요소:

_onHeaderClick(event) {
    event.preventDefault();
    console.log(event.target);
},

캡처하고 싶다th요소.이 동작은,headerElement'몇 가지 문자열'이지만input요소,input요소는 에서 참조되는 요소입니다.event.target소유물.

이를 실현하는 가장 좋은 방법은 무엇입니까?

핸들러를 바인드하고 있기 때문에thcurrentTarget 속성을 사용할 수 있습니다.대상 속성은 이벤트를 디스패치한 요소를 참조합니다.

_onHeaderClick(event) {
    event.preventDefault();
    console.log(event.currentTarget);
}

체크해 주세요

_onHeaderClick(event) {
   event.preventDefault();
   if(event.target === event.currentTarget) {
      // handle
   }
}

이렇게요?

event.target.parentNode

어떤 이유에서인지 받아들여진 해결책은 나에게 효과가 없었다.

생각할 수 있는 회피책 중 하나는,data-value에서 제외할 하위 요소에 태그를 지정합니다.onClick이벤트:

const eg = () => {

    const clickParent = (event: React.MouseEvent) => {

        event.preventDefault();
        let dataValue = (event.target as HTMLElement).getAttribute('data-value');
        if (dataValue !== 'child') {
            console.log('parent clicked');
        };

    };

    const clickChild = (event: React.MouseEvent) => console.log('child clicked');

    return (

        <div data-value='parent' onClick={clickParent}>

            <div data-value='child' onClick={clickChild}>
            </div>

        </div>

    );


};

event.currentTarget을 사용합니다.

 onClick(e) {
    e.preventDefault();
    console.log(e.currentTarget);
}

언급URL : https://stackoverflow.com/questions/34349136/react-how-to-capture-only-parents-onclick-event-and-not-children