Javascript 镭增强组件的组件安装中的绑定范围

我正在开发名为

ProjectCard

的React组件，它包含两个div。第二个div有一个下拉列表，我想在用户将鼠标悬停在卡上或单击下拉列表时突出显示整个卡。我使用Radium向以前的组件添加悬停功能，但为了结合这种新的突出显示逻辑，我跟踪了卡状态下的

isActive

和

isLocked

。例如，在以下函数中，当鼠标进入或离开组件时，我切换

isActive

。（我在构造函数中绑定了

toggleActive

）

但是，我得到了一个错误，在安装组件之前，我无法设置状态。拨弄一下，在各种函数中记录

这个

，这似乎是镭的问题。我在导出时使用了镭包装器，如下所示：

export default Radium（ProjectCard）

，而上面的

TogCollective

将

ProjectCard

记录为

this

，而

componentDidMount

将

RadiumEnhancer（ProjectCard）

记录为

this

。无镭的解决方法是使用HoC，但我认为可以通过调整绑定范围来解决这个问题，因此我将函数绑定移动到

componentDidMount

，如下所示。（使用箭头函数自动绑定构造函数的作用域调用）

但是，在componentDidMount中绑定并将鼠标悬停在组件上不会导致任何更改，并且

toggleActive

会将

记录为未定义。运气不好，修复似乎不起作用

然而，在尝试调试时，我手动调用了toggleActive（如上所示），它记录了
RadiumEnhancer（ProjectCard）
（我想要的范围），奇迹般地，悬停功能开始工作（其他功能也得到了正确的范围）

我的问题是：


不正确的范围/镭是否导致设置状态错误？代码中除了setState之外没有异步操作
如果是这样的话，这个修正是否合法？为什么在我将
this
绑定到的范围更改后，它不起作用
为什么手动调用toggleActive会给所有函数赋予正确的
this
和作用域

谢谢大家!！
下面是相关代码的粘贴库：
如果删除渲染函数中的所有内容，只渲染一个简单的p标记，您将看到“this”和“toggleActive”未定义。仔细检查渲染函数
 尝试使用arrow函数定义
componentDidMount=（）=>{}
，这样
componentDidMount
将用作上下文
this
。使用arrow符号默认为未增强的ProjectCard，因此这不起作用，不过感谢您的建议！我将渲染函数缩减为以下内容，悬停表示“无法设置未定义的状态”（其中
此
未定义）。将绑定函数保留在componentDidMount中，我在使用和w/o箭头符号时都会遇到此错误。渲染只是
返回（
toggleActive () {
  console.log(this);
  this.setState({
    isActive: !this.state.isActive
  });
}

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.
}