React Native中如何为多个react-native-ratings组件分别设置状态？

嗨，很高兴帮你搞定这个问题！你现在的核心需求是让三个RatingView分别对应并更新父组件Feedback里的technicalRating、analyticalRating、commRating三个状态。实现思路很简单：通过回调函数把子组件的评分值传递回父组件，让父组件负责更新对应的状态字段。

下面是修改后的完整代码，我会标注关键改动点：

第一步：改造RatingView组件，支持接收外部状态和回调 #

我们需要让RatingView变成一个"受控组件"，通过props接收初始评分值和评分变化后的回调：

export class RatingView extends Component {
  // 评分完成时，调用父组件传递的回调函数，把评分值传回去
  ratingCompleted = (rating) => {
    this.props.onRatingChange(rating);
  };

  render() {
    return (
      <Rating
        showRating
        onFinishRating={this.ratingCompleted}
        style={{ marginRight: 10, marginTop: 6 }}
        fractions={1}
        imageSize={20}
        showRating={false}
        // 使用父组件传递的初始值，保证组件状态和父state同步
        startingValue={this.props.startingValue}
      />
    );
  }
}

第二步：更新Feedback父组件，绑定对应状态和回调 #

在父组件中，我们为每个RatingView绑定对应的初始状态和状态更新函数：

export class Feedback extends Component {
  constructor(props) {
    super(props);
    this.state = {
      // 初始值改为0更合理，因为评分是数字类型
      technicalRating: 0,
      analyticalRating: 0,
      commRating: 0,
    };
  }

  // 定义三个状态更新函数，分别对应不同的评分字段
  handleTechnicalRatingChange = (rating) => {
    this.setState({ technicalRating: rating });
  };

  handleAnalyticalRatingChange = (rating) => {
    this.setState({ analyticalRating: rating });
  };

  handleCommRatingChange = (rating) => {
    this.setState({ commRating: rating });
  };

  render() {
    return (
      {/* React Native要求组件只有一个根元素，这里用<>空标签包裹 */}
      <>
        <View style={styles.row}>
          <View style={styles.view}>
            <Text style={styles.skillsText}>Technical Skills*</Text>
          </View>
          <RatingView
            startingValue={this.state.technicalRating}
            onRatingChange={this.handleTechnicalRatingChange}
          />
        </View>
        <View style={styles.row}>
          <View style={styles.view}>
            <Text style={styles.skillsText}>Analytical Skills*</Text>
          </View>
          <RatingView
            startingValue={this.state.analyticalRating}
            onRatingChange={this.handleAnalyticalRatingChange}
          />
        </View>
        <View style={styles.row}>
          <View style={styles.view}>
            <Text style={styles.skillsText}>Communication*</Text>
          </View>
          <RatingView
            startingValue={this.state.commRating}
            onRatingChange={this.handleCommRatingChange}
          />
        </View>
      </>
    );
  }
}

可选优化：简化重复的回调函数 #

如果觉得写三个相似的回调函数太冗余，可以用一个通用函数，通过参数区分要更新的状态字段：

// 替换原来的三个回调函数
handleRatingChange = (stateField, rating) => {
  this.setState({ [stateField]: rating });
};

// 使用时这样传参
<RatingView
  startingValue={this.state.technicalRating}
  onRatingChange={(rating) => this.handleRatingChange('technicalRating', rating)}
/>

这样不管你有多少个评分组件，都可以复用同一个回调函数，代码更简洁。

内容的提问来源于stack exchange，提问作者Gulshan Kumar