Как установить состояние разных свойств?

Question

Я новичок, чтобы реагировать на родных.Я использую библиотеку «Reaction-native-рейтинги» для рейтинга звезд, и у меня есть 3 места, где я использую компонент рейтинга, но не знаю, как установить состояние свойства для каждого из представлений.

Вот код ниже, я хочу обновить техническую оценку, аналитическую оценку, оценку:

export class Feedback extends Component {
    constructor(props) {
            super(props);
            this.state = {
                technicalRating: '',
                analyticalRating: '',
                commRating:'',
            }
        }

         render() {
            return (
                    <View style={styles.row}>
                        <View style={styles.view}>
                            <Text style={styles.skillsText}>Technical Skills*</Text>
                        </View>
                        <RatingView />
                    </View>

                    <View style={styles.row}>
                        <View style={styles.view}>
                            <Text style={styles.skillsText}>Analytical Skills*</Text>
                        </View>
                        <RatingView />
                    </View>

                    <View style={styles.row}>
                        <View style={styles.view}>
                            <Text style={styles.skillsText}>Communication*</Text>
                        </View>
                    <RatingView />
                </View>
        } 
}

export class RatingView extends Component {
    ratingCompleted(rating) {
            console.log("Rating is: " + rating)
        } 

        render() {
            return <Rating
                        showRating
                        onFinishRating={this.ratingCompleted}
                        style={{ marginRight: 10, marginTop: 6 }}
                        fractions={1}
                        imageSize={20}
                        showRating={false}
                        startingValue={0}
                    />
          }
}

Заранее спасибо.

Answer 1

Попробуйте код ниже:

export class Feedback extends Component {
    constructor(props) {
    super(props);
    this.state = {
            technicalRating: '',
            analyticalRating: '',
            commRating:'',
    }
     } 

     onTechnicalRatingCom =() => {
        //you code that you want to run after technical skill rating complete 
   } 

   onAnaliticalRatingCom = () => {
    // you code that you want to run after analitical skill rating complete 
    } 

    onCommunicationRatingCom = () => {
        // you code that you want to run after communication skill rating complete 
    } 

     render() {
        return (
         <View style={styles.row}>
             <View style={styles.view}>
                <Text style={styles.skillsText}>Technical Skills*</Text>
             </View>
             <RatingView onRatingCompleted={this.onTechnicalRatingCom} />
         </View>

         <View style={styles.row}>
             <View style={styles.view}>
                <Text style={styles.skillsText}>Analytical Skills*</Text>
             </View>
             <RatingView onRatingCompleted={this.onAnaliticalRatingCom} />
         </View>

         <View style={styles.row}>
             <View style={styles.view}>
                <Text style={styles.skillsText}>Communication*</Text>
             </View>
             <RatingView onRatingCompleted={this.onCommunicationRatingCom} />
         </View>
    )
    }
} 

export class RatingView extends Component {
      constructor(props) {
        super(props);
   } 

          render() {
            return <Rating
              showRating
              onFinishRating={this.props.onRatingCompleted}
              style={{ marginRight: 10, marginTop: 6 }}
              fractions={1}
              imageSize={20}
              showRating={false}
              startingValue={0}
            />
          }
        }