Question

大家好，我创建了星级评分组件，现在将其添加到屏幕中。现在的问题是如何在屏幕内获取组件的返回值，以便在提交时将其发送到服务器。

这是我的组成部分

export default class StarsRating extends Component {
    constructor(props) {
        super(props)
        this.state = {
            rating: this.props.rating || null,
            temp_rating: null
        }
    }

    rate(rating) {
        this.setState({
            rating: rating,
            temp_rating: rating
        });
    }

    render() {
        // This array will contain our star tags. We will include this
        // array between the view tag.
        let stars = [];
        // Loop 5 times
        for (var i = 1; i <= 5; i++) {
            // Set the icon to filled stars
            let icon = "star-outline";
            // If ratings is lower, set the icon to unfilled stars
            if (this.state.rating >= i && this.state.rating != null) {
                icon = "star";
            }
            // Push the Icon tag in the stars array
            stars.push((
                <TouchableOpacity key={i} onPress={this.rate.bind(this, i)}>
                    <Icon
                        name={icon}
                        size={40}
                        color={colors.yellow}
                    />
                </TouchableOpacity >
            ));
        }

        return (
            <View style={styles.wrapper}>
                {stars}
            </View>
        );
    }
}

在我的屏幕上，我像这样<StarsRating />

Answer 1

最好的选择是将onChanged函数作为道具从屏幕（在渲染位置）传递给您的组件。

<StarsRating onChanged={(rating) => {
    // yourFunctionWithApiCall(rating)
    // axios.post() directly here 
}} />

在StarsRating组件中，您只需要在rate方法中添加对该函数的调用。

rate(rating) {
    this.setState({
        rating: rating,
        temp_rating: rating
    });

    // when You think that value should be saved to API call function passed with props
   this.props.onChanged(rating);
}

通常-将此api通讯功能作为道具传递给您的组件。因此，当等级更改后的行为可能不同时，您可以在另一个项目中重用它。

如何从屏幕上的组件获取道具？

1 个答案: