在React中访问父组件的方法onClick

Question

因此，正如标题所示，我只是尝试通过子组件访问React中父组件的方法。我知道这可以通过道具来实现，但是我试图通过onClick事件来实现，但它似乎并不喜欢这样做。这是我的问题的一个基本例子。

var Child = React.createClass({

render: function() {
    return (

        <button onClick={this.onClick}>Click Here</button>
  );
 }
});   


var Parent = React.createClass({

onClick: function() {
    console.log('I've been clicked');
  },


render: function() {
    return (

        <Child />

  );
 }
});

ReactDOM.render(<Parent />, document.getElementById('Parent'));

如何获取子组件的按钮onClick事件以触发父组件的onClick方法？感谢帮助。

Answer 1

您可以将Parent的onClick函数传递给Child作为道具：

<Child myClick={this.onClick} />

然后在Child中使用它：

<button onClick={this.props.myClick}>Click Here</button>

完整代码：

var Child = React.createClass({
    render: function() {
        return (<button onClick={this.props.myClick}>Click Here</button>)
    }
});

var Parent = React.createClass({
    onClick: function() {
        console.log("I've been clicked");
    },

    render: function() {
        return (<Child myClick={this.onClick} />);
    }
});

ReactDOM.render(<Parent />, document.getElementById('container'));