Event onClick with React

Question

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.

erik-sn · Accepted Answer · 2016-09-09 19:00:20Z

1

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.

answered Sep 9, 2016 at 19:00

erik-sn

2,6001 gold badge23 silver badges39 bronze badges

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

2 Comments

Ogurchik Over a year ago

Ho, it works! This "this.props.onClick" is props component Application?

erik-sn Over a year ago

When you specify something "on" a JSX element like <KaKa name="Ogurchik" />, the KaKa class receives it in a props object - so this.props.name would equal "Ogurchik". this refers to the instance of the class, props is the properties object in that class, and name is a field in the props object.

erichardson30 · Accepted Answer · 2016-09-09 19:14:12Z

1

You are passing a prop called onClick to Kaka and then in Kaka, you are not calling that function anywhere... in Kaka change :

<div> Hell o forld </div>

to

<div onClick={this.props.onCLick}> Hell o forld </div>

then you should achieve the desired results

edited Sep 9, 2016 at 19:14

answered Sep 9, 2016 at 18:59

erichardson30

5,0548 gold badges29 silver badges47 bronze badges

Collectives™ on Stack Overflow

Event onClick with React

2 Answers 2

2 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Related