Parent's onClick squashed by child's onClick

Child BigButton’s render:

return this.transferPropsTo(<button onClick={this.childHandleClick}>Press</button>);

Parent’s render:

return (<BigButton onClick={this.parentHandleClick} /><h1>hello</h1>);

In this case, childHandleClick will apparently squash parentHandleClick, and unless childHandleClick calls this.props.onClick(); inside its body there’s no way to trigger parent’s click event. This kind of sucks, because each time the child uses a similar event it needs to do a conditional to check if the parent’s also employing it.

Also, somewhat related: is it better to attach an event like done above or to do it in componentDidMount? Waiting for 4.0’s best practices.

[rafaeldwan]

Here’s a modernized version of the example given above.

class BigButton extends React.Component {
  childHandleClick = (e) => {
    alert('big button clicked!')
    this.props.onBigButtonClick()
  }
  render() {
    return (
      <button onClick={this.childHandleClick}>
        <span />
      </button>
    )
  }
}

class Parent extends React.Component {
  parentHandleClick = () => {
    alert('parent clicked')
  }
  render() {
    return (
      <BigButton onBigButtonClick={this.parentHandleClick} />
    )
  }
}

[chenglou]

That was very informative, thanks.