React/JS - onMouseOverテキストを変更する

Question

私はonMouseHoverを使用するときに表示するテキストを追加しようとしていますが、使用することなく方法を見つけようとしているように、 CSSまたはJQuery。どのようにしてonMouseHoverに関数呼び出しに基づいてテキストを表示させることができますか？

function URL() { 
     return (
      <a href={url} onMouseOver={mouseOver()}>{mouseOver()}</a> 
     ); 
    } 
    function mouseOver() { 
     return (
      <p>Hovering</p> 
     ); 
    } 

Answer 1

あなたは（あなたはコンストラクタ関数で初期化する必要がありますする）状態を変更するためにonMouseEnterとonMouseLeaveの組み合わせを使用することができます。例えば：

function URL() { 
     return (
     <a href={url} onMouseEnter={showText()} onMouseLeave={hideText()}>{this.state.text}</a> 
    ); 
    } 
    function showText() { 
     this.setState({text : "Hovering"}) 
    } 
    function hideText() { 
     this.setState({text : ""}) 
    } 

Answer 2

class HoverableComponent extends React.Component { 
    constructor() { 
    super(); 
    this.state = { text : '' } 
    } 
    //set the text 
    onMouseover (e) { 
    this.setState({text : 'some text'}) 
    } 
    //clear the text 
    onMouseout (e) { 
    this.setState({text : ''}) 
    } 
    render() { 
     const {text} = this.state; 
     return (
     <div 
      onMouseEnter={this.onMouseover.bind(this)} 
      onMouseLeave={this.onMouseout.bind(this)}>{text}</div> 
    ) 
    } 
}