Блог

Я изо всех сил пытаюсь закончить свой звездный рейтинг с помощью React. Я не могу заставить его изначально отображать ОТСУТСТВИЕ ЗВЕЗДОЧЕК. Я использую управляемую форму и HOC, в которой есть обработчик состояния и onChange.

Вот реализация:

ХОК:

  const withRating = (Component) => {
  class withRating extends PureComponent {
    constructor(props) {
      super(props);

      this.state = {
        ratingStars: ``,
      };

      this.handleRatingChange = this._handleRatingChange.bind(this);
    }

    _handleRatingChange(evt) {
      const value = evt.target.value;
      this.setState(() => ({
        ratingStars: value,
      }));
    }

    render() {
      const {ratingStars} = this.state;

      return (
        <Component
          onRatingChange={this.handleRatingChange}
          ratingStars={ratingStars}
        />
      );
    }
  }
  return WithRating;
};    
export default withRating;
 

И компонент звездного рейтинга:

 const RATING_STARS = [`1`, `2`, `3`, `4`, `5`];

const StarRating= (props) => {
  const {
    onRatingChange,
    ratingStars,
  } = props;

  return (
    <div className="add-rating">
      <form
        action="#"
        className="add-rating"
        onSubmit={(evt) => onFormSubmit(evt)}
      >
        <div className="rating">
          <div className="rating__stars">
            {RATING_STARS.map((star) => (
              <React.Fragment key={`star-${star}`}>
                <input
                  className="rating__input"
                  id={`star-${star}`}
                  type="radio"
                  name="rating"
                  value={star}
                  onChange={(evt) => onRatingChange(evt)}
                  checked={ratingStars === star}
                  disabled={isReviewFormBlocked}
                />
                <label className="rating__label" htmlFor={`star-${star}`}>{`Rating ${star} stars`}</label>
              </React.Fragment>
            ))}
          </div>
        </div>
      </form>
    </div>
  );
};

StarRating.propTypes = {
  onRatingChange: PropTypes.func.isRequired,
  ratingStars: PropTypes.string.isRequired,
};

export default StarRating;
 

Начальное состояние в HOC имеет пустую строку в качестве начального значения, но по какой-то причине оно отображает 5 звезд. Если я изменю его на 2 , он отобразит 2 звезды (то же самое для 1 , 3 , 4 , 5 ), но все остальные значения заставляют его отображать все звезды.

Надеюсь, вы сможете помочь, потому что я потратил целую вечность на эту крошечную проблему.