事件 onClick 与 React

Question

我玩弄 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 我不希望在单击组件 Kaka 启动工作函数“handle”时返回 consol.log。但它不起作用。 我的问题是，内部组件可以使用外部组件的功能吗？在我的示例中，外部组件是 Application，内部组件是 Kaka，而我想要启动的功能是句柄。

请告诉我为什么我的 sn-p cod 不起作用。我想，我不明白组件之间如何交互。对不起我的英语。

Answer 1

您正在将一个名为 onClick 的道具传递给 Kaka，然后在 Kaka 中，您不会在任何地方调用该函数...在 Kaka 中更改：

<div> Hell o forld </div>

到

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

那么你应该达到预期的结果

Answer 2

您将 {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。