2

我正在研究一个名为 React 的组件ProjectCard，它包含两个 div。第二个 div 有一个下拉菜单，当用户将鼠标悬停在卡片上或单击下拉菜单时，我想突出显示整张卡片。我使用 Radium 为以前的组件添加悬停功能，但为了合并这个新的高亮逻辑，我跟踪isActive并isLocked处于卡片状态。例如，isActive当鼠标进入或离开以下函数中的组件时，我会切换。toggleActive（我在构造函数中绑定）

toggleActive () {
  console.log(this);
  this.setState({
    isActive: !this.state.isActive
  });
}

但是，我收到一个错误，即在安装组件之前我无法设置状态。摸索了一下，登录this了各种功能，似乎是镭的问题。我在导出中使用了 Radium 包装器，如下所示：export default Radium(ProjectCard);，上面toggleActive记录ProjectCard为this，而componentDidMount记录RadiumEnhancer(ProjectCard)为this. 无镭的解决方法是使用 HoC，但我想我可以通过调整绑定 this 的范围来解决这个问题，所以我将函数绑定移动到componentDidMount，如下所示。（使用箭头函数自动绑定范围，如来自构造函数的调用）

constructor (props: Props) {
  super(props);
  this.state = {
    isActive: true,
    isLocked: false
  };
}

componentDidMount() {
  console.log(this);
  this.onClick = this.onClick.bind(this);
  this.toggleLock = this.toggleLock.bind(this);
  this.toggleActive = this.toggleActive.bind(this);
  console.log("mounted, functions bound");
  //console.log(this.toggleActive);
  this.toggleActive();
  //manual fix, stackoverflow this.
}

但是，在 componentDidMount 中绑定并将鼠标悬停在组件上不会导致任何更改并toggleActive记录this为未定义。不走运，修复似乎不起作用。

但是，在尝试调试时，我手动调用了 toggleActive（如上所示）并记录RadiumEnhancer(ProjectCard)了（我想要的范围），并且奇迹般地，悬停功能开始工作（并且其他功能也获得了正确的范围）。

我的问题是：

  • 不正确的范围/半径是否导致了 setState 错误？除了 setState 之外，代码中没有异步操作。
  • 如果是这样，此修复是否合法？为什么我更改绑定的范围后它不起作用this？
  • 为什么手动调用toggleActive赋予所有函数权限this和范围？

谢谢！以下是相关代码的 pastebin：https ://pastebin.com/MRKw2APw

4

1 回答 1

0

如果您删除渲染函数中的所有内容并仅渲染一个简单的 p 标签，您将看到 'this' 和 'toggleActive' 不是未定义的。仔细检查您的渲染功能。

于 2017-12-22T01:49:11.257 回答