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

【问题标题】：Access a parent component's method onClick in React在 React 中访问父组件的方法 onClick
【发布时间】：2016-11-02 23:14:26
【问题描述】：

所以正如标题所示，我只是试图通过子组件访问 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 方法？感谢您的帮助。

【问题讨论】：

标签： javascript node.js express reactjs

【解决方案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'));

【讨论】：

谢谢，这是一个完美的答案。我真的很感激。

【解决方案2】：

这就是 React 的方式，你可以将回调函数的引用作为道具传递给孩子，然后让孩子使用道具调用函数。这是 React 方式，当孩子访问父属性时，不能在 props 之外完成。

如果你想在子组件中做更多的事情，你可以在你的子组件中定义一个 onclick 函数并让它做任何额外的事情或向this.props.onClick 添加参数。

【讨论】：