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>

反应评级组件未按预期工作

1 个答案: