React 從另一個類 ES6 調用函數
[英]React call a function from another class ES6
問題描述
class F1 extends React.Component{ hot(){ alert("Hot function running"); } lot(){ let t = this; ReactDOM.render(<F2 yF={() => { t.hot(); }} />,document.getElementById("b")); } render(){ return ( <button onClick={this.lot}>F1 click</button> ); } } class F2 extends React.Component{ constructor(props){ super(props); } render(){ return ( <button onClick={this.props.yF}>F2 click</button> ); } } ReactDOM.render(<F1 />,document.getElementById("a"));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>JS Bin</title> </head> <body> <div id="a"></div> <div id="b"></div> </body> </html>
https://jsbin.com/poqofohiqa/edit?html,js,console,output
當我單擊Button F2時，我想調用class F1的函數，應該執行 F1 中的函數。
目前我試圖將函數從 F1 傳遞到 F2 但它不起作用
更新 1
為簡單起見...
我試圖通過單擊F2上的按鈕來調用F1的hot函數
1 個解決方案
解決方案1
0 已采納 2017-03-08 14:53:10
您需要在constructor方法中將 lot 方法綁定到 this。 那么只有它會得到上下文
class F1 extends React.Component{ constructor() { super(); this.lot = this.lot.bind(this); } hot(){ alert("Hot function running"); } lot(){ ReactDOM.render(<F2 yF={() => { this.hot(); }} />,document.getElementById("b")); } render(){ return ( <button onClick={this.lot}>F1 click</button> ); } } class F2 extends React.Component{ constructor(props){ super(props); } render(){ return ( <button onClick={this.props.yF}>F2 click</button> ); } } ReactDOM.render(<F1 />,document.getElementById("a"));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>JS Bin</title> </head> <body> <div id="a"></div> <div id="b"></div> </body> </html>
JavaScript es6 從另一個類調用靜態函數
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.