Reactjs、私のスクリプトで何かが間違っていますが、何がわからないのですか

Question

私は反応しています。ここにアイコンがあります。このアイコンをCSSのようにホバー状態にする必要がありますが、

import React from 'react'; 
import ReactDOM from 'react-dom'; 

var FontIcon = React.createClass({ 

getInitialState:() => { 
    return { 
     hover: false, 
    }; 
}, 

render(){ 

    var _props = this.props, 
    iconStyle = { 
     'font-size': _props.size, 
     cursor: "default" 
    } 

    function hoverOn(){ 
     this.setState({ 
      hover: true 
     }); 
    } 

    function hoverOff(){ 
     this.setState({ 
      hover: false 
     }); 
    } 

    if (this.state.hover) { 
     iconStyle.color = _props.hoverColor; 
    } else { 
     iconStyle.color = _props.color; 
    } 

    return(
      <i className="material-icons" style={iconStyle} onmouseenter={this.hoverOn} onmouseleave={this.hoverOff} >{_props.className}</i> 
    ); 
} 
}); 

ReactDOM.render(
    <FontIcon className="account_circle" size="100" color="blue" hoverColor="red" />, 
    document.getElementById('app') 
); 

そして、私が間違っているのか分からない：アプリ、ここに私のコードは反応する助け

Answer 1

まず用/おかげで、SETSTATEで（）のレンダリングを使用しないでください！
ReactイベントはすべてCamelCaseで書かれているので、これは単なるjavascriptなので注意してください。

var FontIcon = React.createClass({ 

    getInitialState() { 
     return { 
      hover: false, 
     }; 
    }, 
    hoverOff() { 
     this.setState({ 
      hover: false 
     }); 
    }, 
    hoverOn() { 
     this.setState({ 
      hover: true 
     }); 
    }, 
    render() { 
     var _props = this.props; 
     var iconStyle = { 
      'font-size': _props.size, 
      cursor: "default" 
     }; 

     if (this.state.hover) { 
      iconStyle.color = _props.hoverColor; 
     } else { 
      iconStyle.color = _props.color; 
     } 

     return(
      <i className="material-icons" 
       style={iconStyle} 
       onMouseEnter={this.hoverOn} 
       onMouseLeave={this.hoverOff} > 
       {_props.className} 
      </i> 
     ); 
    } 
}); 

Answer 2

1. render内の関数を宣言しないでください。このような何かを試してみてください。 Render関数は非常に頻繁に呼び出されるため、ブラウザは新しい関数を作成して古い関数をメモリから削除します。だから、結果コードhttps://facebook.github.io/react/docs/events.html#mouse-events

：

import React from 'react'; 
import ReactDOM from 'react-dom'; 

var FontIcon = React.createClass({ 

getInitialState:() => { 
    return { 
     hover: false, 
    }; 
}, 

hoverOn() { 
    this.setState({ 
     hover: true 
    }); 
}, 

hoverOff() { 
    this.setState({ 
     hover: false 
    }); 
}, 

render() { 
    var _props = this.props, 
    iconStyle = { 
     'font-size': _props.size, 
     cursor: "default" 
    } 

    if (this.state.hover) { 
     iconStyle.color = _props.hoverColor; 
    } else { 
     iconStyle.color = _props.color; 
    } 

    return(
      <i className="material-icons" 
       style={iconStyle} 
       onMouseEnter={this.hoverOn} 
       onMouseLeave={this.hoverOff}>   
        {_props.className} 
      </i> 
    ); 
} 
}); 

ReactDOM.render(
    <FontIcon className="account_circle" size="100" color="blue" hoverColor="red" />, 
    document.getElementById('app') 
);