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

Posted 2023-02-21

【中文标题】我们可以将点击处理程序附加到自定义子组件吗

【英文标题】：can we attach click handlers to custom child components

【发布时间】：2014-04-23 13:54:05

【问题描述】：

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

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

示例代码：

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

【参考方案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>;
  
);

【讨论】：

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