React onClick event call sequence in embed component

Question

var mark = null;
class Demo extends React.Component {
  handleClick(evt) {
    mark = "outer";
  }
  handleSpanClick(evt) {
    mark = "inner";
  }
  render() {
    return (
      <div onClick={this.handleClick.bind(this)}>
        <span onClick={this.handleSpanClick.bind(this)}>
          inner
        </span>
      </div>
    )
  }
}

For example, I expect that the mark will be "inner" when I click span, but actually, the mark will be "outer". I know the onClick event of span will be called firstly, so I cant get "inner".

How can I get "inner" in this sample?

score 2 · Accepted Answer · edited May 23 '17 at 12:34

2

Example for Bubbling and Capturing in React.js

Bubbling and capturing are both supported by React in the same way as described by the DOM spec, except for how you go about attaching handlers.

<div onClickCapture={this.handleClick.bind(this)}>
...

edited May 23 '17 at 12:34

Community

1
1

answered Apr 25 '17 at 10:03

afacat

1,880
1
10
8

Amazing! I don't even know onClickCapture event, Thank you :) But I have no way to give you a "UP" because of my reputation, sorry :( – wumou.4wei Apr 25 '17 at 10:38
1

@wumou.4wei . It's okay, I didn't know this before I answer this question, so get the skill together. – afacat May 05 '17 at 07:29

React onClick event call sequence in embed component

1 Answers1