Question

我试图将点击处理程序添加到我自己的子组件中。在反应铬扩展中，我也能看到点击处理程序。

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

示例代码：

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

Answer 1

MySampleComponent可以选择任何想要的道具;组件不会自动将道具复制到他们的孩子身上。如果您希望能够将onClick处理程序添加到MySampleComponent，那么您可以在该组件的定义中支持：

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

Answer 2

您可以从同一组件添加处理程序或通过props调用它。下面的代码在道具中查找onClick param。如果没有通过，那么它适用于组件中的默认处理程序（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 个答案: