var RatingWidget = React.createClass({ getInitialState: function() { return { current: this.props.current, supposed: this.props.supposed, rating: [1, 2, 3, 4, 5] } }, handleSetRating: function (r) { this.setState({ current: r }); }, handleSupposeRating: function(r) { this.setState({ supposed: r }); }, handleRevertRating: function() { this.setState({ supposed: this.state.current }); }, render: function() { return ( <div className="app"> <RatingList rating={this.state.rating} supposed={this.state.supposed} onClickRating={this.handleSetRating} onMouseOverRating={this.handleSupposeRating} onMouseOutRating={this.handleRevertRating}/> </div> ); } }); var RatingList = function({ rating, supposed, onClickRating, onMouseOverRating, onMouseOutRating }) { var currentRating = supposed; var ratings = rating.map(function(m) { var star = m > currentRating ? <span className="rating--empty">★</span> : <span className="rating--full">★</span>; return ( <span className="rating" onClick={onClickRating.bind(null, m)} onMouseOver={onMouseOverRating.bind(null, m)} onMouseOut={onMouseOutRating.bind(null)}> {star} </span> ); }); return ( <div className="rating">{ratings}</div> ); }; ReactDOM.render( <RatingWidget current={0} supposed={0} />, document.getElementById('container') );
<script src="https://facebook.github.io/react/js/jsfiddle-integration-babel.js"></script> <div id="container"></div>
.rating { cursor:pointer } .rating--full { color: #FD9; } .rating--empty { color: #c6c6c6; }