Question

我是新来的本地人。我正在使用“ react-native-ratings”库进行星级评分，在3个地方使用评分组件，但不知道如何为每个视图设置属性状态。

这是下面的代码，我想更新technicalRating，analyticRating，commRating：

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}
            />
          }
        }

如何设置不同属性的状态？

1 个答案: