事件onClick与React

时间:2016-09-09 18:54:35

标签: events reactjs onclick components

我愚弄Reactjs并尝试启动此代码

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 我不喜欢点击组件卡卡开始工作功能&#34;处理&#34;并返回consol.log。但它不起作用。 我的问题是,内部组件是否可以使用外部组件功能?在我的例子中,外部组件是Application,内部组件是Kaka,我想要启动的函数是句柄。

请告诉我为什么我的代码片段不起作用。我想,我不明白组件之间如何相互作用。抱歉我的英文。

2 个答案:

答案 0 :(得分:1)

你正在向卡卡传递一个名为onClick的道具,然后在卡卡,你没有在任何地方调用这个功能......在卡卡改变:

<div> Hell o forld </div>

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

然后你应该达到预期的效果

答案 1 :(得分:1)

您正在将{this.handle}作为名为onClick的属性传递给KaKa类 - 而不是实际向其添加点击处理程序。

你需要使用你传递的这个道具,如下所示:

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

Here's a functional codepen of this