React 组件不调用 onClick 处理程序
React component does not call onClick handler
我有一个使用 es6 class 语法构建的组件。它是一个简单的组件,具有多种多样的样式。然后,在父组件(称为 app)上,我想呈现该组件并给它一个调用父级 onclick 处理程序的 onClick。到目前为止,父级渲染子级是这样的:
<child_component onClick={this.clickhandler}>
然后我在该父组件中有一个方法,我已在构造函数中绑定到父上下文。
组件呈现,但单击该组件时从未调用单击处理程序。知道为什么吗?
由于子组件不是本机 DOM 元素,而是另一个 React 组件,此处定义的 onClick 只是该组件的 属性。您需要做的是,在子组件内部将 onClick 属性传递给 DOM 组件的 onClick 事件:
var ChildComponet= React.createClass({
render: function() {
return (
<div className="childcomponent" onClick={this.props.onClick}>
...
</div>
);
}
});
我有一个使用 es6 class 语法构建的组件。它是一个简单的组件,具有多种多样的样式。然后,在父组件(称为 app)上,我想呈现该组件并给它一个调用父级 onclick 处理程序的 onClick。到目前为止,父级渲染子级是这样的:
<child_component onClick={this.clickhandler}>
然后我在该父组件中有一个方法,我已在构造函数中绑定到父上下文。
组件呈现,但单击该组件时从未调用单击处理程序。知道为什么吗?
由于子组件不是本机 DOM 元素,而是另一个 React 组件,此处定义的 onClick 只是该组件的 属性。您需要做的是,在子组件内部将 onClick 属性传递给 DOM 组件的 onClick 事件:
var ChildComponet= React.createClass({
render: function() {
return (
<div className="childcomponent" onClick={this.props.onClick}>
...
</div>
);
}
});