在React中訪問一個父組件的方法onClick

所以正如標題所示，我只是試圖通過一個子組件訪問React中父組件的方法。我明白這可以通過道具來實現，但是我試圖通過onClick事件來實現，而且看起來並不像那樣。這是我的問題的一個基本例子。在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方法？感謝幫助。

來源

2016-11-02 jdev99

你可以通過父母的onClick功能，兒童作爲道具：

<Child myClick={this.onClick} />

，然後在兒童使用它：

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

來源

2016-11-02 23:26:55 qkr

謝謝你，這是一個完美的答案。對此，我真的非常感激。 – jdev99

這就是React的方式，你可以將它的回調函數的引用傳遞給孩子作爲道具，然後讓孩子使用道具調用該函數。這是React的方式，當涉及訪問父項屬性的子項時，不能在道具之外完成。

如果你想在子組件中做更多的事情，你可以在你的子組件中定義一個onclick函數，並讓它做任何額外的事情或者添加參數到this.props.onClick。

來源

2016-11-02 23:24:08 finalfreq

在React中訪問一個父組件的方法onClick

回答

相關問題