javascript - 如何从屏幕中的组件获取 Prop ？

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 函数作为 Prop 从屏幕(渲染它的地方)传递给您的组件。

<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 通信函数作为 props 传递给您的组件。因此，当评级更改后的行为可能不同时，您将可以在另一个项目中重用它。