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'));

Answer 2

就像React的方式一样，你可以将它作为一个道具传递给孩子的回调函数，然后让孩子使用prop来调用函数。这是React方式，当涉及访问父属性的子进程时，不能在props之外完成。

如果您想在子组件中执行更多操作，可以在子组件内部定义onclick函数，并让它执行任何其他操作或向this.props.onClick添加参数。

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

2 个答案: