我们可以将点击处理程序附加到自定义子组件吗答案

【问题标题】：can we attach click handlers to custom child components我们可以将点击处理程序附加到自定义子组件吗
【发布时间】：2014-04-23 13:54:05
【问题描述】：

我试图向我自己的子组件添加一个点击处理程序。在 react chrome 扩展中，我也能够看到点击处理程序。

但点击本身不起作用 - 想知道我错过了什么。

示例代码：

... 
render (
  <MySampleComponent onClick={this.handler} />
);
...

【问题讨论】：

标签： reactjs

【解决方案1】：

您可以从同一个组件添加处理程序或通过道具调用它。下面的代码在 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} />);
 }

......

【讨论】：

【解决方案2】：

MySampleComponent 可以使用它想要的任何道具；组件不会自动将 props 复制到它们的子级。如果您希望能够将 onClick 处理程序添加到 MySampleComponent，那么您可以在该组件的定义中支持这一点：

var MySampleComponent = React.createClass({
  render: function() {
    return <div onClick={this.props.onClick}>...</div>;
  }
});

【讨论】：

如果在外部文件上怎么称呼？