React.js模式

Question

我有一個對象，我經常需要應用/操作上的方法是這樣的：

var asperaWeb = new AW4.Connect({ 
    sdkLocation: CONNECT_INSTALLER, 
    dragDropEnabled: false, 
    minVersion: '3.6.6' 
}); 

我已經試過把狀態此對象，我可以當用戶與UI交互時，在我的React組件中使用它。

組件的狀態：

function getNavBarState() { 
    return { 
    asperaWeb: new AW4.Connect({ 
     sdkLocation: CONNECT_INSTALLER, 
     dragDropEnabled: false, 
     minVersion: '3.6.6' 
    }) 
    }; 
} 

JSX在組件：

<input 
    className="btn btn-primary" 
    onClick={this.state.asperaWeb.showSelectFileDialog({success:fileControls.uploadFiles})} 
/> 

但是，當組件呈現的inputonClick似乎從來就沒設置。當我使用React工具檢查元素時，onClick是null。

我的問題是：

1. 爲什麼null？
2. 這是保持一個對象並應用其方法的最佳模式嗎？它不應該處於狀態嗎？備擇方案？

Answer 1

除非你是如何設置的組件及其狀態的任何問題，您的問題似乎是，你實際上是調用onClick屬性裏面的方法this.state.asperaWeb.showSelectFileDialog。一旦掛載了input，就會調用該方法，並嘗試將onClick設置爲等於該方法返回的值。

相反，你應該bind的方法調用this背景下，你想傳遞給它的值：

<input 
    className='btn btn-primary' 
    onClick={this.state.asperaWeb.showSelectFileDialog.bind(this, {success:fileControls.uploadFiles})} 
/> 

很難用我掌握的信息來複制你的具體情況，但here's a working JFiddle with an example什麼，我想你正在尋找。

（旁註：Facebook的建議反對在render調用bind，因爲它創建了一個新的功能，每次它render S，但您可以輕鬆谷歌的替代方法。）