I have a div with rating like this in one of my ponents:

var Rating = React.createClass({
    render: function () {
        return (
            <div className="rate-line">
                <div className="rate-title">{this.props.name}</div>
                <div className="rating">
                    <span>☆</span>
                    <span>☆</span>
                    <span>☆</span>
                    <span>☆</span>
                    <span>☆</span>
                </div>
                <input type="hidden" id={this.props.id}/>
            </div>
        );
    }
});

And I have now tag in other ponent:

<div>
     <div className="result-label">Score</div>
     <Rating/>
</div>

How can I add value to hidden input like number 3 if I click on third span ? How can I to do this properly in react?

Many thanks for help.

I have a div with rating like this in one of my ponents:

var Rating = React.createClass({
    render: function () {
        return (
            <div className="rate-line">
                <div className="rate-title">{this.props.name}</div>
                <div className="rating">
                    <span>☆</span>
                    <span>☆</span>
                    <span>☆</span>
                    <span>☆</span>
                    <span>☆</span>
                </div>
                <input type="hidden" id={this.props.id}/>
            </div>
        );
    }
});

And I have now tag in other ponent:

<div>
     <div className="result-label">Score</div>
     <Rating/>
</div>

How can I add value to hidden input like number 3 if I click on third span ? How can I to do this properly in react?

Many thanks for help.

• javascript
• jquery
• reactjs

Share Improve this question Follow edited Sep 15, 2016 at 1:03 Robson asked Sep 15, 2016 at 0:42 RobsonRobson 1,28744 gold badges2121 silver badges4545 bronze badges 2

• Do you have some actual React code? – EugZol Commented Sep 15, 2016 at 0:47
• @EugZol I have edited my question with actual code. I get stuck, don't have idea how to render rating more dynamic with data to get some value on click span. Could you give any suggestions ? – Robson Commented Sep 15, 2016 at 1:05

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 4

Assign value to your input from state:

<input type="hidden" id={this.props.id} value={this.state.starRating} />

Now the question is how and when do we set state. When is easy — it should be done on click:

<span onClick={this.handleStarClick}>☆</span>

All that's left is writing actual handler:

handleStarClick: function(starRating){this.setState({starRating})}

Oh, but we don't have our starRating parameter in onClick handler! Let's add just that. Final version:

<span onClick={() => this.handleStarClick(1)}>☆</span>` ... <span onClick={() => this.handleStarClick(5)}>☆</span>

I'm not sure why you think you'd need a hidden input. Can you explain that decision?

The remended way to get the value from the rating ponent would be to pass down a callback that will get called with the new value of the rating whenever it is clicked and changed.

Look at this implementation to see what I mean (N.B. it's runnable).

const Rating = React.createClass({
  getInitialState: function () {
    const stars = this.props.stars;

    return {
      value: stars,
      dynamicValue: stars
    };
  },

  handleClick: function (newValue) {
    this.setState({
      value: newValue,
      dynamicValue: newValue
    });

    if (this.props.onRated) {
      this.props.onRated(newValue);
    }
  },

  handleMouseEnter: function (newValue) {
    this.setState({ dynamicValue: newValue });
  },

  handleMouseLeave: function (newValue) {
    this.setState({ dynamicValue: this.state.value });
  },

  render: function () {
    const starSpans = [];

    for (let v = 1; v <= 5; v++) {
      if (v <= this.state.dynamicValue) {
        starSpans.push(
          <span
              key={v}
              className="star"
              onMouseEnter={this.handleMouseEnter.bind(this, v)}
              onMouseLeave={this.handleMouseLeave.bind(this, v)}
              onClick={this.handleClick.bind(this, v)}
              >
            ★
          </span>
        );
      } else {
        starSpans.push(
          <span
              key={v}
              className="star"
              onMouseEnter={this.handleMouseEnter.bind(this, v)}
              onMouseLeave={this.handleMouseLeave.bind(this, v)}
              onClick={this.handleClick.bind(this, v)}
              >
            ☆
          </span>
        );
      }
    }

    return <div>{starSpans}</div>;
  }
});

function handleRated(newRating) {
  console.log(`The new rating is: ${newRating}`);
}

ReactDOM.render(
  <div>
    <Rating stars={1} onRated={handleRated} />
    <Rating stars={2} />
    <Rating stars={3} />
    <Rating stars={4} />
    <Rating stars={5} />
  </div>,
  document.getElementById('container')
);

.star {
  font-size: 2em;
  color: #ff851b;
  cursor: pointer;
}

<script src="https://cdnjs.cloudflare./ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare./ajax/libs/react/15.1.0/react-dom.min.js"></script>

<div id="container"></div>

You can do this

var Rating = React.createClass({
getInitialState: function() {
 return {rating: 0}
},
handleClick: fuction(e) {
 var rating = e.currentTarget.dataset.id
 this.setState({ rating: rating })
},
render: function () {
    return (
        <div className="rate-line">
            <div className="rate-title">{this.props.name}</div>
            <div className="rating">
                <span onCLick={this.handleClick} data-id="1">☆</span>
                <span onCLick={this.handleClick} data-id="2">☆</span>
                <span onCLick={this.handleClick} data-id="3">☆</span>
                <span onCLick={this.handleClick} data-id="4">☆</span>
                <span onCLick={this.handleClick} data-id="5">☆</span>
            </div>
            <input type="hidden" id={this.props.id} value={this.state.rating}/>
        </div>
    );
}

});