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

React.js pattern for referencing an object instance

本文关键字：js 模式 React 对象 实例 引用      更新时间：2023-09-26

我有一个经常需要应用/操作方法的对象，它看起来像这样:

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 in component:

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

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

我的问题是:

  1. 为什么是null ?这是保存对象并对其应用方法的最佳模式吗?它不应该处于状态吗?选择呢?

除非您如何设置组件及其状态的任何问题，您的问题似乎是您实际上在onClick属性内调用this.state.asperaWeb.showSelectFileDialog方法。这将在input被挂载后立即调用该方法，并尝试将onClick设置为该方法的返回值。

相反，你应该bind方法调用this上下文和你想传递给它的值:

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

很难用我所拥有的信息来复制你的具体情况，但这里有一个工作的JFiddle，我认为你正在寻找一个例子。

(旁注:Facebook建议不要在render中调用bind，因为它每次创建render的新函数，但您可以轻松地谷歌替代方法。)

相关文章：