How to click at button at the another button in React?

Question

I have button in div, where I already have option 'onClick'

I want user to click on this star icon, but do not handle onClick, which called when he clicks at item. Screen shot: Item example

Code:

<a
      className="item type2"
      onClick={this.changeStatus}
      style={{display: toRender ? 'block' : 'none'}}
    >
      <div className="name">{this.getQuality(this.props.item.name)}</div>
      <div className="image"><img ref="image" src={this.props.item.image} /></div>
      <div className="icons"><i className="ico-star" onClick={this.addToFavourites}></i></div>
      <div className="price">
        ${(this.props.item.price / 100).toFixed(2)}
      </div>
    </a>

so you want that clicking on `this.addToFavourites` wont trigger `this.changeStatus`? — Sagiv b.g, Sep 26 '18 at 18:20

score 1 · Accepted Answer · answered Sep 26 '18 at 18:26

If you want clickable child nodes to not trigger parent node (event-bubbling) then you can use Event.stopPropagation().

Here is a small running example:

class App extends React.Component {
  anchor = () => console.log("anchor");

  button = e => {
    e.stopPropagation();
    console.log("button");
  };

  render() {
    return (
      <div>
        <div>
          <a
            onClick={this.anchor}
            style={{ border: "1px solid", padding: "15px" }}
          >
            I'm an anchor
            <button onClick={this.button}>Button</button>
          </a>
        </div>
      </div>
    );
  }
}

const root = document.getElementById("root");
ReactDOM.render(<App />, root);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root" />

score 0 · Answer 2 · answered Sep 26 '18 at 18:24

What are you trying to achieve exactly?

If you are trying to update state or complete some action from the button click you can do this from the function you defined:

addToFavourites = () => {
  this.setState({"someStateProperty": "update"})
}

If you are trying to update state or click the tag by clicking the star I would suggest adding some additional detail as to what you are trying to do. If you want to update styling or something then you should be able to update state of toRender on click of the star.

I want clicking on this. addToFavourites not triggering this.changeStatus — MIkle, Sep 26 '18 at 18:27

How to click at button at the another button in React?

2 Answers2