ReactJS onClick doesn't trigger

Question

I'm having trouble getting onClick working in reactJS. I put together this fiddle and am sure its something trivial. Code is below, see fildle for (not)working example:

var Bar=React.createClass({
    render: function() {
    return (
    <div className="bar" style={{width: this.props.width+"px"}}>                {this.props.width}</div>)
  }
})

var ClickableBar=React.createClass({

    clickBar: function(e) {
        alert('clicked');
        this.setState({width:220});
    },
    render: function() {
      return (
      <Bar onClick={this.clickBar} width={this.state.width}/>
      )
  }
})

ReactDOM.render(
  <ClickableBar width="20"/>,
  document.getElementById('container')
);

Austin Greco · Accepted Answer · 2016-03-11 21:25:12Z

1

You just need to pass the handler through as a prop:

var Bar = React.createClass({
    render: function() {
    return (
      <div onClick={this.props.onClick} className="bar" style={{width: this.props.width+"px"}}>{this.props.width}</div>
    );
  }
});

Otherwise, your div will be created without a click listener on it, since a "Bar" doesn't really exist in the dom (only the div is actually there).

answered Mar 11, 2016 at 21:25

Austin Greco

33.6k6 gold badges60 silver badges61 bronze badges

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

Comments

The Reason · Accepted Answer · 2016-03-11 21:57:19Z

0

And you also missed to initialize your state

getInitialState: function(){
  return {
    width: 30
  }
}

Otherwise you will get an error

Uncaught TypeError: Cannot read property 'width' of null

I prefer using style in this way

render(){
  var myStyle = {width: 200, backgroundColor: green};
  return <div style={myStyle }> ... </div>
}

It also works with React. Fiddle example

Thanks

edited Mar 11, 2016 at 21:57

answered Mar 11, 2016 at 21:32

The Reason

8,0135 gold badges27 silver badges43 bronze badges

Comments

Tanmay Verma · Accepted Answer · 2016-08-15 06:54:07Z

0

You just need to bind the function with the DOM element.

<Bar onClick={this.clickBar.bind(this)} width={this.state.width}/>

or

<Bar onClick={() => {this.clickBar()}} width={this.state.width}/>

If you want to call function by passing the event:

<select onClick = {(event) => {self.funcName(event)}} >

If you want to call function by passing arguments:

 <select onClick = {(event) => {self.funcName(event, arg1)}} >

answered Aug 15, 2016 at 6:54

Tanmay Verma

2631 gold badge3 silver badges13 bronze badges

Collectives™ on Stack Overflow

ReactJS onClick doesn't trigger

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