ReactJS-正在从子组件检索状态

Question

我有两个组件，一个父组件和一个子组件。我想从子级检索状态，并将结果状态存储在数组中。

父级：

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的(这种状态。如果你可能在其他地方重复使用这个，或者如果父母已经在做其他事情，我会这么做。