প্রতিক্রিয়া নেটিভ একটি রাষ্ট্র কি?

রাজ্য হল সেই জায়গা যেখানে ডেটা আসে। আমাদের সর্বদা আমাদের রাষ্ট্রকে যতটা সম্ভব সহজ করার চেষ্টা করা উচিত এবং রাষ্ট্রীয় উপাদানের সংখ্যা কমিয়ে আনা উচিত। উদাহরণস্বরূপ, যদি আমাদের কাছে দশটি উপাদান থাকে যেগুলির জন্য রাজ্যের ডেটা প্রয়োজন, তাহলে আমাদের একটি ধারক উপাদান তৈরি করা উচিত যা তাদের সকলের জন্য রাষ্ট্রকে রাখবে৷

উদাহরণ 1

ব্যবহারকারী যখন বোতাম টিপে তখন বোতামের শিরোনাম চালু/বন্ধে পরিবর্তন হয়।

স্টেটটি কন্সট্রাক্টরের ভিতরে শুরু করা হয়েছে যেমন নীচে দেখানো হয়েছে −

isToggle হল রাজ্যকে দেওয়া বুলিয়ান মান। isToggle সম্পত্তির উপর ভিত্তি করে বোতামের শিরোনাম নির্ধারণ করা হয়। মান সত্য হলে, বোতামের শিরোনামটি চালু অন্যথায় বন্ধ।

যখন বোতামটি চাপানো হয় তখন অনপ্রেস পদ্ধতি বলা হয় যা সেটস্টেটকে কল করে যা isToggle মান আপডেট করে যা নীচে দেখানো হয়েছে −

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

ব্যবহারকারী বোতামে ক্লিক করলে onPress ইভেন্ট কল করা হবে এবং setState isToggle সম্পত্তির অবস্থা পরিবর্তন করবে।

App.js

প্রতিক্রিয়া আমদানি করুন, { উপাদান } "react" থেকে; import { Text, View, Button, Alert } থেকে 'react-native'; ক্লাস অ্যাপ কম্পোনেন্ট প্রসারিত করে { কনস্ট্রাক্টর(প্রপস) { সুপার(প্রপস); this.state ={ isToggle:true }; } render(props) { রিটার্ন (   { this.setState({ isToggle:!this. state.isToggle }); }} title={ this.state.isToggle ? 'ON' :"OFF" } color="green" />  ); }}ডিফল্ট অ্যাপ রপ্তানি করুন;

আউটপুট

ব্যবহারকারী যখন বোতাম টিপে তখন বোতামটি টগল হবে৷

উদাহরণ 2

ব্যবহারকারী যখন এটিতে ক্লিক করে তখন পাঠ্য পরিবর্তন করা।

নীচের উদাহরণে, স্টেটটি কনস্ট্রাক্টরের ভিতরে নিম্নরূপ প্রদর্শিত হয় -

নিম্নরূপ −

{this.state.myState} 

ব্যবহারকারী যখন টেক্সট স্পর্শ করেন বা চাপেন তখন onPress ইভেন্টটি চালু হয় এবং এই পদ্ধতিটিকে কল করে।

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

প্রতিক্রিয়া আমদানি করুন, { উপাদান } "react" থেকে; 'react-native' থেকে { Text, View, Button, Alert } আমদানি করুন; ক্লাস অ্যাপ কম্পোনেন্ট প্রসারিত করে { কনস্ট্রাক্টর(প্রপস) { সুপার(প্রপস); this.state ={ myState:'Tutorialspoint এ স্বাগতম' }; } changeState =() => this.setState({myState:'Hello World'}) render(props) { রিটার্ন (  <দেখুন>  {this.state.myState}    ); }}ডিফল্ট অ্যাপ রপ্তানি করুন;

আউটপুট