Звездная половина Рейтинг для динамически создаваемого поля - PullRequest
Новая
       6

Звездная половина Рейтинг для динамически создаваемого поля

0 голосов
/ 27 июня 2019

Я использую компонент response-star-rating-component для оценки на половину звезды, он работает корректно для статического значения, но когда я создал свое поле динамически и хочу, чтобы половина оценки его работала некорректно.Я хочу дать оценку каждому полю, которое создается из базы данных.Я попробовал этот код, пожалуйста, найдите, где я не прав

вот мой: - 

 this.state = {
   datalan:{}
 }


render() {
  return (

  {this.state.skill && this.state.skill.slice(0,3).map(function(skills, i){
            return  <div key={i}>
            <div className="form-group row">
            <label className="col-md-4 col-form-label">{skills.keywordval}</label>
            <div className="col-md-8">
            <div style={{fontSize: 26}}>

                <StarRatingComponent
                name={skills.keywordval}
                starColor="#ffb400"
                emptyStarColor="#ffb400"
                value={this.state.keywordval} // i think here is some mistake
                onStarClick={this.onStarClickHalfStar.bind(this)}
                renderStarIcon={(index, value) => {
                        return (
                            <span>
                                <i className={index <= value ? 'fas fa-star' : 'far fa-star'} />
                            </span>
                        );
                    }
                }
                renderStarIconHalf={() => {
                    return (
                        <span>
                        <span style={{position: 'absolute'}}><i className="far fa-star" /></span>
                        <span><i className="fas fa-star-half i" /></span>
                        </span>
                    );
                }} />
            </div>
            </div>
            </div>
        </div>
        }, this)}
)}

onStarClickHalfStar(nextValue, prevValue, name, e) {
  const xPos = (e.pageX - e.currentTarget.getBoundingClientRect().left) / e.currentTarget.offsetWidth;
 console.log("xp====:",xPos);
 if (xPos <= 0.5) {
   nextValue -= 0.5;
 }
 console.log('name5: %s, nextValue: %s, prevValue: %s', name, nextValue, prevValue);

this.setState({datalan:nextValue});

}

...