Question

我有2个组成部分，1个父母和1个孩子。我想从子级中检索状态并将结果状态存储在数组中。

父母：

var arr = ['test1', 'test2'];
for(var i = 0; i < arr.length; i++){
    <div key={i}>
      < Slider />
    </div>
}

孩子（来自https://www.npmjs.com/package/react-star-rating-component）：

class Slider extends React.Component {
    constructor(props) {
      super(props); 
      this.state = {
        rating: 1,
      };
      this.onStarClick = this.onStarClick.bind(this);
    }

    onStarClick(nextValue, prevValue, name) {
      this.setState({rating: nextValue});
    }
    render(){
      const { rating } = this.state;
      return(
      <div>
        <StarRatingComponent 
          name="rate1" 
          starCount={5}
          value={rating}
          onStarClick={this.onStarClick.bind(this)}
        /> 
        <br/>
      </div>
      );
    }
  }

我想检索每个评分并将其存储在数组中，但是我不确定该怎么做。我已经读过您需要传递一个回调函数，但是我不确定如何为每次对Slider的调用检索每个等级。

Answer 1

在不了解您的应用程序的情况下，如果您需要这样做，我将直接在父组件中使用<StarRatingComponent />并在其中有一个ratings状态对象（也许是名称或ID到等级的映射））。或者，您可以创建一个类似Slider的容器，但可以处理（多个StarRatingComponents的）此状态。如果您可能会在其他地方重用它，或者如果父母已经在做其他事情，请这样做。

ReactJS-从子组件中获取状态

1 个答案: