如何通过ReactJS组件更新过渡延迟值？

Question

我是第一次编写ReactJS组件。 我有一个工具提示，需要在mouseenter和mouseleave事件上具有动态延迟值。 我目前在CSS中使用带有过渡延迟的悬停方法。 该解决方案对我来说是有效的，但是我需要能够通过我的组件设置状态并更新每个过渡延迟（请参见下文）。 我需要能够使用纯ReactJS / Javascript（没有JQuery等）完成此操作。

这是我的代码示例：

.tooltip .tooltiptext {
visibility: hidden;
width: 120px;
background-color: #555;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
position: absolute;
z-index: 1;
bottom: 125%;
left: 50%;
margin-left: -60px;
opacity: 0;
transition-delay: 2s;

}

.tooltip:hover .tooltiptext {
visibility: visible;
opacity: 1;
transition-delay: 1s;

}

如何从组件访问每个这些转换延迟属性，并使用setState更改值？

谢谢你的帮助

更新 ：我想通了如何通过JS更新CSS属性。 我现在需要能够重置状态。 请从下面查看我的评论。 这是一些附加代码：

constructor(props) {
super(props);
this.state = {
  userInput: '',
  transitionDelay: '0s'
} 
  handleMouseEnterDelay() {
   var mouseIn = document.getElementById('tooltip');
   var delayIn = mouseIn.style.transitionDelay = '0s';    
   this.setState({
    transitionDelay: {delayIn}
   })          
  }

  handleMouseLeaveDelay() {
   var mouseLeave = document.getElementById('tooltiptext');
   var delayLeave = mouseLeave.style.transitionDelay = '4s';
   this.setState({
     transitionDelay: {delayLeave}
   })

所以我需要的是，在每个悬停事件之后，我都需要transitionDelay来获取函数中定义的值。 即在第一个mouseenter / leave事件之后，它保持4s，因此第二次我进入hover（enter）时，进入和离开都延迟了4s。 我需要输入延迟返回到handleMouseEnterDelay函数中定义的0s。

有没有一种方法可以在setState中具有两个“ transitionDelay”值？ 我尝试了一个嵌套对象，即in：{transitionDelay}，out：{transitionDelay}，但是在设置状态时无法访问它。

Answer 1

也许像...

constructor() {
  this.state = {
    style: {
      transitionDelay: '1s'
    }
  };

  this.toggleDelay = this.toggleDelay.bind(this);
}

toggleDelay(state) {
  this.setState({ style: { transitionDelay: state ? '2s' : '1s' } });
}
...

render() {
  return (
    <div className="tooltip" style={this.state.style} onMouseEnter={() => this.toggleDelay(true)} onMouseLeave={() => this.toggleDelay(false)}>
     .....
    </div>
  );
}