React Native – State

setState

Untuk mengubah tampilan dalam aplikasi anda secara realtime, Anda dapat menggunakan fungsi setState yang akan me-rerender ulang component anda dan setiap child component-nya. setState juga dapat menggabungkan nilai baru untuk sebuah object “state” dengan nilai sebelumnya, fungsi setState adalah pemicu event re-render sebuah component.

setState bisa diisi dengan parameter data berformat object atau juga bisa diisi dengan sebuah fungsi yang memiliki “return” data object.

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

Data berformat function berguna untuk mere-render tampilan berdasarkan variabel state atau props yang ada.

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

Anda juga bisa membuat sebuah callback pada setState yang akan dijalankan saat component selesai dire-render ketika variable state diset dengan nilai baru.

this.setState({myKey: 'myValue'}, () => {
 // statement saat component sudah  di re-rendered.
));

Contoh Lengkap

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() {
  // tampilan ini akan berubah ketika state yang ada di component "MyParentComponent" berubah
  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);

Inisialisasi State

Anda harus terlebih dahulu mendefinisikan variabel state di dalam fungsi “construtor” yang ada dalam “class component” anda seperti berikut:

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

Dengan menggunakan fungsi setState kita dapat meng-update “view” component kita.

Add a Comment

Your email address will not be published. Required fields are marked *