陣營 - 一個類的實例創建和使用

我試圖獲取類ActionEditor的一個實例，這樣我以後能夠使用它的方法：陣營 - 一個類的實例創建和使用

function render() { 
    const toRender = responseActions.map((actionInstance) => { 
     currentActionEditing=actionInstance; 
     return <li>{ actionInstance === expandedAction ? <ActionEditor id={actionInstance.title} action={getActionByKey(actionInstance.actionType)} instance={actionInstance} state={actionInstance} /> : <button onClick={createOnClick(actionInstance)}>{actionInstance.title}</button>}</li>; 
    }); 

    ReactDOM.render(
    <div> 
     <div>{toRender}</div> 
     <button style={styleButtonGenerate} onClick={onGenerateClick}>Generate</button> 
    </div>, 
    document.getElementById('root') 
    ); 
}

我已經嘗試使用它通過像這樣的onClick方法：

function onGenerateClick() { 
    var editor = document.getElementById(currentActionEditing.title); 
    editor.prototype = ActionEditor; 
    editor.methodIWantToUse(); 
}

但它總是結果爲null/undefined。

我知道這不是最好的例子，但它應該足以證明這個問題。
有沒有辦法解決這個問題？

來源

2017-04-19 MrGuy

你不React_ _thinking - 您創建做出響應的組件應該有幾個，如果有的話，必須方法類似。如果你想要一組函數，只需在模塊中創建它們即可。什麼是用例？ –

我們試圖用一種方法來創建一個編輯器來保存任何內容 – MrGuy

我想你在這裏想要的是將ref保存到組件，以便它可以被訪問，請參見下面的示例中如何從父組件調用sayHi方法。

class MyComponent extends React.Component { 
 
    sayHi() { 
 
     console.log('hi'); 
 
    } 
 
    
 
    render() { 
 
     return (<div>I'm a component!</div>) 
 
    } 
 
} 
 

 
class App extends React.Component { 
 
    render() { 
 
    
 
     // just a way to show how to access a child component method. 
 
     setTimeout(() => { 
 
      this.node.sayHi(); 
 
     }, 1000) 
 
     
 
     
 
     return (<MyComponent ref={(node) => this.node = node}/>) 
 
    } 
 
} 
 

 

 
ReactDOM.render(<App />, document.querySelector("body"))

<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>

來源

2017-04-19 09:10:47 thedude

陣營 - 一個類的實例創建和使用

回答

相關問題