Event Handler on component in Reactjs

Question

This is not firing on the component but when I attach my event handler to a div it works. Do I need to pass a prop types function in my child component?

const buttonStyle = {
  color: 'red'
};

class Button extends React.Component {
    render() {
        return (
          <a className="social-button twitter">
            <i href="#" className="fa fa-twitter"></i>
          </a>
        )};
}

class PanelButtons extends React.Component {
  constructor(props){
    super(props);
    }

  handleClick() {
    console.log('this is:');
  }

    render() {
        return (
          <div>  
          <div onClick={(e) => this.handleClick(e)}> {/*this works attaching it to a div*/}
            CLick me
            </div>
            <div className="social-buttons">
                <Button onClick={(e) => this.handleClick(e)} />{/*does now work attaching it to a component*/}
            </div>
           </div>
        )
    }
}

ReactDOM.render(<PanelButtons />,  document.querySelector('body'));

AranS · Accepted Answer · 2017-11-17 21:56:15Z

2

What you did basically, is passing a callback called onClick to the Button component. It will be accessible to you through the component's props.

class Button extends React.Component {
    render() {
        return (
          <a className="social-button twitter" onClick={this.props.onClick}>
            <i href="#" className="fa fa-twitter"></i>
          </a>
        )};
}

once the Button component's a element is clicked, the callback that you passed will be triggered (and handleClick will be called).

answered Nov 17, 2017 at 21:56

AranS

1,91113 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

MarkoCen · Accepted Answer · 2017-11-17 21:58:14Z

2

You should pass down the props into <Button /> component

class Button extends React.Component {
    render() {
        return (
          <a className="social-button twitter" {...this.props}>
            <i href="#" className="fa fa-twitter"></i>
          </a>
        )};
}

Comments

Nandu Kalidindi · Accepted Answer · 2017-11-17 22:03:48Z

An onClick on a <button /> would have worked as you expected.

But this is <Button /> a component which you created, the onClick will be sent as props which you can invoke through an onClick on the Button component's a tag like below, whose handleClick will callback the actual onClick on your PanelButtons component.

const buttonStyle = {
  color: 'red'
};

class Button extends React.Component {

    handleClick = (e) => {
      this.props.onClick(e)
    }

    render() {
        return (
          <a className="social-button twitter" onClick={this.handleClick}>
            <i href="#" className="fa fa-twitter"></i>
          </a>
        )};
}

class PanelButtons extends React.Component {
  constructor(props){
    super(props);
    }

  handleClick() {
    console.log('this is:');
  }

    render() {
        return (
          <div>  
          <div onClick={(e) => this.handleClick(e)}> {/*this works attaching it to a div*/}
            CLick me
            </div>
            <div className="social-buttons">
                <Button onClick={(e) => this.handleClick(e)} />{/*does now work attaching it to a component*/}
            </div>
           </div>
        )
    }
}

ReactDOM.render(<PanelButtons />,  document.querySelector('body'));

If you just want to add an onClick in the PanelButtons for each button, just modify your render a little bit like this by adding event listener on the div tag.

render() {
    return (
      <div>  
      <div onClick={(e) => this.handleClick(e)}> {/*this works attaching it to a div*/}
        CLick me
        </div>
        <div className="social-buttons" onClick={(e) => this.handleClick(e)}>
            <Button />{/*does now work attaching it to a component*/}
        </div>
       </div>
    )
}

Collectives™ on Stack Overflow

Event Handler on component in Reactjs

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related