ReactJS: Development onClick within another component with event onClick



  • The component has developments:

    <li onClick={this.ITEM_handleClick}>
      <div>
        <span onClick={this.ITEM_closeClick} >&#215;</span>
        <p>{text}</p>
      </div>
    </li>
    
    • Question 1: How do cancel the external onClick at the internal onClick?
    • Question 2: Will the current span be helped in a separate component?


  • In one of the DOM knots, event click "slams" up the tree until it reaches the root or it's clear.

    React sends the "syntic" to the processor. https://facebook.github.io/react/docs/events.html#syntheticevent which, among other things, has a method stopPropagate♪ This method (as well as its negative analogue) stops further developments up the DOM tree. This is how this method can be used in practice:

    var Block = React.createClass({
        handleClose: function(e) {
            e.stopPropagation();
            alert('close');
        },
        handleClick: function(e) {
            alert('click');
        },
        render: function() {
            return (
                <div onClick={this.handleClick}>
                    <span>Foo Bar Baz</span>
                    <span onClick={this.handleClose}> &#215;</span>
                </div>
            );
        }
    });
    

    Here comes JSFiddle with https://jsfiddle.net/wcyrby1g/1/ ♪


Log in to reply
 


Suggested Topics

  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2