React တွင် Array များအပေါ် Reactive လုပ်ဆောင်ချက်များ

ယခု Array များ၏ element များကို reactive နည်းလမ်းဖြင့် လက်တွေ့လုပ်ဆောင်ရန် သင်ယူကြပါစို့။ ထိုသို့လုပ်ဆောင်ရန် li တစ်ခုစီအပေါ်တွင် event handler တစ်ခုချိတ်ဆက်မည်။ ထို handler ထဲသို့ ၎င်း li ၏ Array အတွင်းရှိ အညွှန်းကိန်း (index) ကို parameter အဖြစ် ပို့ဆောင်ပေးမည်။

function App() {
	const [notes, setNotes] = useState([1, 2, 3, 4, 5]);
	
	const result = notes.map((note, index) => {
		return <li key={index} onClick={() => doSmth(index)}>
			{note}
		</li>;
	});
	
	return <div>
		<ul>
			{result}
		</ul>
	</div>;
}

ကျွန်ုပ်တို့၏ function အတွင်းတွင် ကျွန်ုပ်တို့၏ Array element အပေါ် မည်သည့်လုပ်ဆောင်ချက်ကိုမဆို ပြုလုပ်နိုင်သည်။

function App() {
	...
	
	function doSmth(index) {
		let copy = Object.assign([], notes);
		copy[index] += '!'; // element တစ်ခုခုနှင့် လုပ်မည်
		setNotes(copy);
	}
}

နံပါတ်များပါသော Array တစ်ခုပေးထားသည်။ ၎င်းကို ul list ပုံစံဖြင့် ရိုက်ထုတ်ပြပါ။ မည်သည့် li ကိုမဆို နှိပ်လိုက်ပါက ၎င်း၏ နံပါတ်ကို စတုရန်းကိန်း တင်လိုက်ပါ။

li တစ်ခုစီ၏ နောက်ဆုံးတွင် ခလုတ်တစ်ခုလုပ်ပါ။ ထိုခလုတ်ကို နှိပ်လိုက်ပါက ၎င်း li သည် list ထဲမှ ဖယ်ရှားခြင်းခံရမည်။

�င်ပူ (input) တစ်ခုပေးထားသည်။ မည်သည့် li ကိုမဆို နှိပ်လိုက်ပါက ၎င်း li ၏ စာသားသည် အင်ပူ (input) ထဲသို့ ရောက်ရှိသွားစေရမည်။

ယခင်ပုစ္ဆာကို အင်ပူ (input) ၏ အာရုံစိုက်မှု ဆုံးရှုံးသွားပါက ပြောင်းလဲထားသော စာသားသည် သက်ဆိုင်ရာ li ထဲသို့ ရောက်ရှိသွားစေရန် ပြင်ဆင်ပါ။

ခလုတ်တစ်ခုပေးထားသည်။ ထိုခလုတ်ကို နှိပ်လိုက်ပါက li များ၏ အစဉ်လိုက်ကို ပြောင်းပြန်ဖြစ်သွားစေရမည်။