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

Question

正如标题所示，我只是想通过子组件访问 React 中父组件的方法。我知道这可以通过 Prop 来完成，但是我试图通过 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 函数作为 prop 传递给 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'));