react: 이벤트 거품 막기

만약 네가 여기에 구조가 있다면

만약에 a탭에 클릭 이벤트를 연결했다면:$("a").click(function(){alert("a"); }); li 라벨에 이벤트를 연결했습니다. 예를 들어:$("li").click(function(){alert("li"); }); 안 넣으면e.preventDefault(); 이 문장은 결과가 있을 것이다alert("a"); 집행 후 다시 집행한다alert("li") 문장은 a라벨이 li라벨에 있기 때문에 a라벨은 li라벨 범위에서 a라벨의 이벤트를 실행한 후에 li라벨의 같은 유형의 이벤트를 실행하고 내부 라벨에서 외부 라벨로 같은 유형의 이벤트를 순서대로 실행하며 안에서 밖으로 나가는 것은 거품이다.

import React, {Component} from "react";

class Action extends Component{
    constructor(props){
        super(props);
        this.handleClick = this.handleClick.bind(this);
    }

    handleClick(e){
        e.preventDefault();
        console.log("this link was clicked");
    }

    render(){
        return(
            "#" onClick={this.handleClick}>Click me
        )
    }
}

export default Action;

이 실례에서 외부 이벤트는 색인 링크입니다. 내부 이벤트는 onClick으로 응답하는 이벤트입니다. 현재 마우스 클릭 이벤트에서 외부 이벤트는 실행되지 않고 내부 이벤트만 실행합니다. onClick에 응답합니다.