反応評価コンポーネントが正常に動作しない

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

私の評価は州の一部として保存されており、その状態を反映するように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>