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})} 
/>

但是当组件呈现时，input onClick似乎永远不会被设置。当我使用React工具检查元素时，onClick为null。

我的问题是：

为什么是null？
这是保持对象和应用方法的最佳模式吗？它应该不在州吗？替代？

Answer 1

如果您在设置组件及其状态方面遇到任何问题，那么您的问题似乎是您实际上在this.state.asperaWeb.showSelectFileDialog属性中调用方法onClick。这会在您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建议不要在bind中调用render，因为它每次render都会创建一个新功能，但您可以轻松地使用Google替代方法。）

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

1 个答案: