事件 onClick 与 React
Posted
技术标签:
【中文标题】事件 onClick 与 React【英文标题】:Event onClick with React 【发布时间】:2017-01-17 23:43:36 【问题描述】:我玩弄 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 不起作用。我想,我不明白组件之间如何交互。对不起我的英语。
【问题讨论】:
【参考方案1】:您正在将一个名为 onClick
的道具传递给 Kaka,然后在 Kaka 中,您不会在任何地方调用该函数...在 Kaka 中更改:
<div> Hell o forld </div>
到
<div onClick=this.props.onCLick> Hell o forld </div>
那么你应该达到预期的结果
【讨论】:
【参考方案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。
【讨论】:
嗬,它有效!这个“this.props.onClick”是props组件Application吗? 当你在像<KaKa name="Ogurchik" />
这样的JSX元素上指定一些东西时,KaKa
类在props
对象中接收它——所以this.props.name
等于“Ogurchik”。 this
是类的实例,props
是该类中的属性对象,name
是props
对象中的一个字段。以上是关于事件 onClick 与 React的主要内容,如果未能解决你的问题,请参考以下文章
JavaScript基础 a标记 使用onclick事件阻止默认跳转 onclick事件 与 跳转 ,onclick事件优先执行。