हैलो दोस्तों मैंने एक स्टार रेटिंग घटक बनाया है और अब मैंने इसे अपनी स्क्रीन में जोड़ लिया है। मेरा प्रश्न अब यह है कि सबमिट करने पर सर्वर पर भेजने के लिए मैं अपनी स्क्रीन के अंदर घटक वापसी मूल्य कैसे प्राप्त करूं।

यह मेरा घटक है

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 />

0
Markus Hayner 30 पद 2018, 20:02

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);
}

सामान्य तौर पर - इस एपीआई संचार फ़ंक्शन को अपने घटक को एक सहारा के रूप में पास करें। इसके लिए धन्यवाद आप इसे किसी अन्य प्रोजेक्ट में पुन: उपयोग कर सकते हैं जब रेटिंग परिवर्तन के बाद व्यवहार भिन्न हो सकता है।

2
Paweł Mikołajczuk 30 पद 2018, 21:42