Javascript 用于引用对象实例的React.js模式

我有一个对象，我经常需要对其应用/操作方法，如下所示：

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

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

组件中的JSX:

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

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

但是当组件呈现时，

输入

onClick

似乎从未设置。当我使用React工具检查元素时，

onClick

为

null

我的问题是：

为什么它是空的

这是保存对象并对其应用方法的最佳模式吗？它不应该处于状态吗？替代品

---

除非您在如何设置组件及其状态方面存在任何问题，否则您的问题似乎是您实际调用了

this.state.asperaWeb.showSelectFileDialog

属性中的方法

onClick

。这将在装入

输入后立即调用该方法，并尝试将
onClick
设置为该方法返回的值

相反，您应该
bind
this

上下文的方法调用和要传递给它的值：

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

用我掌握的信息很难复制你的具体情况，但我认为你在寻找什么

（旁注：Facebook建议不要在

render

中调用

bind

，因为它每次

render

s时都会创建一个新函数，但你可以很容易地用谷歌搜索其他方法。）