Ogurchik Ogurchik - 2 months ago 9
React JSX Question

Event onClick with React

I fool around with Reactjs and try launch this code

var Kaka = React.createClass({render() { return <div> Hell o forld </div> }})
var Application = React.createClass({
handle() {console.log("took took");},
render() {return <div><Kaka onClick = {this.handle} /></div>}
})
React.render(<Application />, document.getElementById('app'));


Example on Codepen
I disire that while click on component Kaka starting work function "handle" and this return consol.log. But it doesn't work.
My question is that, may an inner component use function which is function of external component? On my example an external component is Application, an inner component is Kaka, and a function which i want launch is handle.

Please, tell me why my snippet cod don't work. I think, i do not understand how a components interact between ourself. Sorry for my English.

Answer

You are passing {this.handle} as a property named onClick to the KaKa class - not actually adding a click handler to it.

You need to use this prop you are passing, something like this:

var Kaka = React.createClass({
   render() { 
     return <div onClick={this.props.onClick}> Hell o forld </div> }})
   }
});

Here's a functional codepen of this.

Comments