我试图向我自己的子组件添加一个点击处理程序。在 react chrome 扩展中，我也能够看到点击处理程序。
但是点击本身不起作用 - 想知道我错过了什么。
示例代码：
...
render (
<MySampleComponent onClick={this.handler} />
);
...
我们可以将点击处理程序附加到自定义子组件吗
IT技术
reactjs
2021-04-11 06:07:50
2个回答
MySampleComponent 可以接受它想要的任何props；组件不会自动将 props 复制到它们的孩子。如果您希望能够向 MySampleComponent 添加一个 onClick 处理程序，那么您可以在该组件的定义中支持这一点：
var MySampleComponent = React.createClass({
render: function() {
return <div onClick={this.props.onClick}>...</div>;
}
});
您可以从同一个组件添加处理程序或通过 props 调用它。下面的代码在 props 中查找 onClick 参数。如果没有传递任何内容，则它会进入组件中的默认处理程序（clickHandler）。
var MySampleComponent = React.createClass({
clickHandler: function(){
// write your logic
},
render: function() {
return <div onClick={this.props.onClick || this.clickHandler}>...</div>;
}
});
并在另一个组件中使用它时使用它如下
...........
handler: function() {
// write your logic
},
render {
var self = this;
return (<MySampleComponent onClick={self.handler} />);
}
......