반응 등급 구성 요소가 예상대로 작동하지 않습니다.

Question

반응 등급 구성 요소 작동을 시도하지만 일부 이상한 동작이 나타납니다. 선택 (예를 들어 별 3 개)하면 별이 선택 상태를 유지하지 않습니다. 이것은 내가 그것을 할 수 있기를 원하는 것이다 : 나는 자식 컴포넌트를 호출하는 부모 컴포넌트 (상태를 처리한다.)를 가지고있다. 그런 다음 자식 구성 요소가 React-Rating 구성 요소를 호출합니다. 이 작업을 수행하려는 이유는이 등급 구성 요소를 다른 장소에서 사용할 수있게 만들 수 있기를 원하기 때문입니다. 따라서 코드 중복이 필요하지 않습니다. 아래는 제 코드입니다.

//THIS IS FROM MY PARENT COMPONENT. 
<Ratings onClick={newRating => this.setState({ rating: newRating })}/> 

//THIS IS MY CHILD COMPONENT THAT CALL THE RATING LIBRARY. 
export const Ratings = ({ rating, onClick}) => (

       <div className={styles.rateContainer}> 
        <Rating 
        empty={`fa fa-star-o fa-2x ${styles.rating}`} 
        full={`fa fa-star fa-2x ${styles.rating}`} 
        onClick={onClick}/>// THIS IS TO OVERRIDE THE onClick event on the react library 
        <div> 
        <p className={styles.comments} /> 
        </div> 
       </div> 
); 
export default Ratings; 

내가 뭘 잘못하고 있니?

Answer 1

내 평점을 state의 일부로 저장 한 다음 initialRate에 해당 상태를 반영하도록 설정했습니다. 그게 내 평판을 고수했다. 나는 이것이 당신이 찾고있는 것이라고 생각합니다.

  <div className={styles.rateContainer}> 
       <Rating 
       empty={`fa fa-star-o fa-2x ${styles.rating}`} 
       full={`fa fa-star fa-2x ${styles.rating}`} 
       onClick={ (rating) => this.setState({rating: rating})} 
       intialRate={this.state.rating} 
      <div> 
       <p className={styles.comments} /> 
       </div> 
      </div>