要素の上をホバリングするときの状態変化をトリガーする方法

Question

ユーザーがそのコンポーネント上にマウスを置いたときに、コンポーネント状態の変更を基本的にトリガーしたいと思っています。

特定の条件（https://github.com/facebook/react/issues/6807）でonMouseEnterとonMouseLeaveが正常に動作しないため、代替手段はありますか？

編集： 再レンダリングとは関係があります。コンポーネントのタイプが同じでも、再レンダリングを強制すると、同じ問題が発生します。ドキュメントから

class onHover extends Component { 

    constructor(props) { 
    super(props); 
    this.state = { 
     bool: false, 
    } 
    } 

    render() { 
    return (
     <div onMouseEnter={() => this.setState({ bool: true })} onMouseLeave={() => this.setState({ bool: false })}> 
     { 
      this.state.bool ? (
      <div key={Math.random()}>[OPTION1] show after onMouseEnter</div> 
     ) : (
      <div key={Math.random()}>[OPTION2] show after onMouseLeave</div> 
     ) 
     } 
     </div> 
    ) 
    } 
} 

Answer 1

：

onMouseEnterとonMouseLeaveイベントは、キャプチャフェーズを持たない代わりに、通常の泡立ちと の入力中の一つに残される要素 から伝播します。

代わり

<div onMouseOver={() => this.setState({ bool: true })} onMouseOut={() => this.setState({ bool: false })}> 
    { 
    this.state.bool ? (
     <span>[OPTION1] show after onMouseEnter</span> 
    ) : (
     <div>[OPTION2] show after onMouseLeave</div> 
    ) 
    } 
</div>