反応ネイティブの状態とは何ですか？

状態は、データの取得元の場所です。状態をできるだけ単純にし、状態のあるコンポーネントの数を最小限に抑えるように常に努める必要があります。たとえば、州からのデータを必要とする10個のコンポーネントがある場合、それらすべての状態を保持する1つのコンテナコンポーネントを作成する必要があります。

例1

ユーザーがボタンを押すと、ボタンのタイトルがON/OFFに変わります。

状態は、以下に示すようにコンストラクター内で初期化されます-

constructor(props) {
   super(props);
   this.state = { isToggle: true };
}

isToggleは、状態に指定されたブール値です。ボタンのタイトルは、isToggleプロパティに基づいて決定されます。値がtrueの場合、ボタンのタイトルはONで、それ以外の場合はOFFです。

ボタンが押されると、以下に示すようにisToggle値を更新するsetStateを呼び出すonpressメソッドが呼び出されます-

onPress={() => {
   this.setState({ isToggle: !this.state.isToggle });
}}

ユーザーがボタンをクリックすると、onPressイベントが呼び出され、setStateがisToggleプロパティの状態を変更します。

App.js

import React, { Component } from "react";
import { Text, View, Button, Alert } from 'react-native';

class App extends Component {

   constructor(props) {
      super(props);
      this.state = { isToggle: true };
   }

   render(props) {
      return (
         <View style={{flex :1, justifyContent: 'center', margin: 15 }}>
            <Button
               onPress={() => {
                  this.setState({ isToggle: !this.state.isToggle });
               }}
               title={
                  this.state.isToggle ? 'ON' : "OFF"
               }
               color="green"
            />
         </View>
      );
   }
}
export default App;

出力

ユーザーがボタンを押すと、ボタンが切り替わります。

例2

ユーザーがテキストをクリックしたときにテキストを変更します。

以下の例では、状態はコンストラクター内に次のように表示されます-

constructor(props) {
   super(props);
   this.state = { myState: 'Welcome to Tutorialspoint' };
}

状態myStateは、次のようにTextコンポーネント内に表示されます-

<Text onPress={this.changeState} style={{color:'red', fontSize:25}}>{this.state.myState} </Text>

ユーザーがテキストをタッチまたは押すと、onPressイベントが発生し、メソッドthis.changeStateを呼び出します。このメソッドは、以下に示すように、状態myStateを更新してテキストを変更します-

changeState = () => this.setState({myState: 'Hello World'})

import React, { Component } from "react";
import { Text, View, Button, Alert } from 'react-native';

class App extends Component {

   constructor(props) {
      super(props);
      this.state = { myState: 'Welcome to Tutorialspoint' };
   }
   changeState = () => this.setState({myState: 'Hello World'})
   render(props) {
      return (
         <View style={{flex :1, justifyContent: 'center', margin: 15 }}>
            <View>
               <Text onPress={this.changeState} style={{color:'red', fontSize:25}}>                         {this.state.myState} </Text>
            </View>
         </View>
      );
   }
}
export default App;

出力