react-native
राज्य

वाक्य - विन्यास

• शून्य सेट करें (फ़ंक्शन | ऑब्जेक्ट नेक्स्टस्टेट, [फ़ंक्शन कॉलबैक])

setState

अपने एप्लिकेशन में दृश्य बदलने के लिए आप setState उपयोग कर सकते हैं - यह आपके घटक और इसके किसी भी बच्चे के घटक को फिर से प्रस्तुत करेगा। setState नए और पिछले राज्य के बीच एक उथला मर्ज करता है, और घटक के पुन: रेंडर को ट्रिगर करता है।

setState या तो एक कुंजी-मूल्य ऑब्जेक्ट या एक फ़ंक्शन लेता है जो कुंजी-मान ऑब्जेक्ट देता है

की-वैल्यू ऑब्जेक्ट

this.setState({myKey: 'myValue'});

समारोह

फ़ंक्शन का उपयोग करना मौजूदा स्थिति या प्रॉप्स के आधार पर एक मूल्य को अपडेट करने के लिए उपयोगी है।

this.setState((previousState, currentProps) => {
    return {
        myInteger: previousState.myInteger+1
    }
})

आप setState करने के लिए एक वैकल्पिक कॉलबैक भी पारित कर सकते हैं जब घटक को नए राज्य के साथ फिर से प्रदान किया जाएगा।

this.setState({myKey: 'myValue'}, () => {
    // Component has re-rendered... do something amazing!
));

पूर्ण उदाहरण

import React, { Component } from 'react';
import { AppRegistry, StyleSheet, Text, View, TouchableOpacity } from 'react-native';

export default class MyParentComponent extends Component {
  constructor(props) {
    super(props);

    this.state = {
      myInteger: 0
    }

  }
  getRandomInteger() {
    const randomInt = Math.floor(Math.random()*100);

    this.setState({
      myInteger: randomInt
    });

  }
  incrementInteger() {
    
    this.setState((previousState, currentProps) => {
      return {
        myInteger: previousState.myInteger+1
      }
    });

  }
  render() {

    return <View style={styles.container}>
      
      <Text>Parent Component Integer: {this.state.myInteger}</Text>

      <MyChildComponent myInteger={this.state.myInteger} />

      <Button label="Get Random Integer" onPress={this.getRandomInteger.bind(this)} />
      <Button label="Increment Integer" onPress={this.incrementInteger.bind(this)} />

    </View>

  }
}

export default class MyChildComponent extends Component {
  constructor(props) {
    super(props);
  }
  render() {
    
    // this will get updated when "MyParentComponent" state changes
    return <View>
      <Text>Child Component Integer: {this.props.myInteger}</Text>
    </View>
    
  }
}

export default class Button extends Component {
  constructor(props) {
    super(props);
  }
  render() {

    return <TouchableOpacity onPress={this.props.onPress}>
        <View style={styles.button}>
          <Text style={styles.buttonText}>{this.props.label}</Text>
        </View>
      </TouchableOpacity>
    
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  button: {
    backgroundColor: '#444',
    padding: 10, 
    marginTop: 10
  },
  buttonText: {
    color: '#fff'
  }
});

AppRegistry.registerComponent('MyApp', () => MyParentComponent);

प्रारंभिक राज्य

आपको अपने कंपोनेंट के कंस्ट्रक्टर फंक्शन के अंदर स्टेट को इस तरह से इनिशियलाइज़ करना चाहिए:

export default class MyComponent extends Component {
  constructor(props) {
    super(props);
    
    this.state = {
      myInteger: 0
    }
  }
  render() {
    return  (
      <View>
        <Text>Integer: {this.state.myInteger}</Text>
      </View>
    )
  }
}

सेटस्टेट का उपयोग करके कोई भी दृश्य को अपडेट कर सकता है।