onMouseLeaveイベントが機能していません

Question

これはnavコンポーネントです。このnavコンポーネントは、実行時にレンダリングされます。 ref_ text_navでdivに入力するとテキストが表示され、ref_ text_navでdivを残すとテキストは非表示になります。

onMouseLeaveが

var React = require('React'); 
var $ = require('jquery'); 

var Nav = React.createClass({ 
    getInitialState: function() { 
     return { 
      items: [] 
     } 
    }, 
    componentWillMount: function() { 
     var _this = this; 
     this.serverRequest = 
     $.post("/nav", {}, function(result) { 
      _this.setState({ 
       items: result.data 
      }); 
     }) 
    }, 

    onMouseEnter: function() { 
     this.refs.text_navigator.style = {display: true} 
    }, 
    onMouseLeave: function() { 
     this.refs.text_navigator.style = {display: 'none'} 
    }, 
    render: function() { 
     var text = this.state.items.map(function(data, index) { 
      var icon = "text_" + data.sname; 
      return (
        <div id={icon} key={index} className="text_nav_item"> 
          <p> 
           <span><a href={data.url}>{data.title} </a></span> 
          </p> 
        </div> 
      ); 
     }); 

     return (
       <div id="nav" className="fixed" style={{zIndex: 1018}} onMouseEnter={this.onMouseEnter} onMouseLeave={this.onMouseLeave}> 
        <div id="text_nav" ref="text_navigator" style={{display: 'none'}} > 
         <div id="text_nav_content"> 
          {item_text} 
         </div> 
        </div> 
       </div> 
     ) 
    } 
}) 

Answer 1

ファーストをオフに動作していないあなたはonMouseEnterとonMouseLeaveで使用しているとして、refはあなたのrenderメソッドではなく、text_navigatorでtext_navあります。しかし、主な問題は、 this.refs.text_navigator.style = {display: true}

として取るための最も一般的なアプローチは、おそらくdisplayTextNavigatorと呼ばれる状態のbooleanを設定することで、あなたが表示スタイルにあなたが何をしようとしている方法を設定することができないということです。 getInitialStateで、falseに設定して、あなたのonMouseEnterとonMouseLeaveの機能が使用できます

onMouseEnter: function() { 
     this.setState({ displayTextNavigator: true}) 
    }, 
    onMouseLeave: function() { 
     this.setState({ displayTextNavigator: false}) 
    }, 

今すぐあなたのrenderメソッドでは、あなたはこのように見えるためにあなたのラップのdivを変更することができます。

<div id="text_nav" ref="text_nav" style={{display: this.state.displayTextNavigator ? 'block': 'none'}} > することができますより読みやすいようにするには、レンダリングメソッドの前にその三項演算子を取り出してください。