React හි ආදාන ක්ෂේත්‍ර අරාවකට බැඳීම

notes යන තත්වයේ අරාවක් ගබඩා කර ඇතැයි සිතමු:

function App() {
	const [notes, setNotes] = useState([1, 2, 3]);
	
	return <div>
		
	</div>;
}

අපට අරාවේ මූලද්‍රව්‍යවල එකතුව සොයා ගන්නා සහායක ශ්‍රිතයක් ද ඇතැයි සිතමු:

function getSum(arr) {
	let sum = 0;
	
	for (const elem of arr) {
		sum += +elem;
	}
	
	return sum;
}

function App() {
	...
}

අපගේ සහායක ශ්‍රිතය භාවිතා කරමින්, අපගේ තත්වයෙන් අරාවේ මූලද්‍රව්‍යවල එකතුව සොයා ප්‍රදර්ශනය කරමු:

function App() {
	const [notes, setNotes] = useState([1, 2, 3]);
	
	return <div>
		{getSum(notes)}
	</div>;
}

දැන් අපි ආදාන ක්ෂේත්‍ර තුනක් සාදා, එක් එක් ආදාන ක්ෂේත්‍රයේ value වල අරාවේ එක් එක් මූලද්‍රව්‍යය ලියමු:

function App() {
	const [notes, setNotes] = useState([1, 2, 3]);
	
	return <div>
		<input value={notes[0]} />
		<input value={notes[1]} />
		<input value={notes[2]} />
		
		{getSum(notes)}
	</div>;
}

දැන් අපි අපගේ ආදාන ක්ෂේත්‍රවලට onChange සිදුවීම එකතු කරමු. මේ සමඟ අපි මෙම සිදුවීම සඳහා එක් පොදු හසුරුවන ශ්‍රිතයක් සාදමු:

function App() {
	const [notes, setNotes] = useState([1, 2, 3]);
	
	function changeHandler(index, event) {
		// පොදු හසුරුවන ශ්‍රිතය
	}
	
	return <div>
		<input value={notes[0]} onChange={event => changeHandler(0, event)} />
		<input value={notes[1]} onChange={event => changeHandler(1, event)} />
		<input value={notes[2]} onChange={event => changeHandler(2, event)} />
		
		{getSum(notes)}
	</div>;
}

ඔබට පෙනෙන පරිදි, changeHandler ශ්‍රිතය පළමු පරාමිතියක් ලෙස අරාවේ එම මූලද්‍රව්‍යයේ අංකය පිළිගනී, එය මෙම ආදාන ක්ෂේත්‍රය සංස්කරණය කරයි.

මෙම අංකය අනුව, අපට ආදාන ක්ෂේත්‍රයේ අන්තර්ගතය සමඟ අරාවේ මූලද්‍රව්‍යය ප්‍රතිස්ථාපනය කළ හැකිය.

අපි එය කරමු:

function changeHandler(index, event) {
	setNotes([...notes.slice(0, index), event.target.value, ...notes.slice(index + 1)]);
}

දැන් ඕනෑම ආදාන ක්ෂේත්‍රයක් සංස්කරණය කළ හැකිය, එම අතරතුර අරාව ප්‍රතික්‍රියාශීලීව වෙනස් වන අතර, ඒ අනුව, එහි මූලද්‍රව්‍යවල එකතුව නැවත ගණනය කෙරේ.

අපි අපගේ සියලුම කේතය එකට එකතු කරමු:

function App() {
	const [notes, setNotes] = useState([1, 2, 3]);
	
	function changeHandler(index, event) {
		setNotes([...notes.slice(0, index), event.target.value, ...notes.slice(index + 1)]);
	}
	
	return <div>
		<input value={notes[0]} onChange={event => changeHandler(0, event)} />
		<input value={notes[1]} onChange={event => changeHandler(1, event)} />
		<input value={notes[2]} onChange={event => changeHandler(2, event)} />
		
		{getSum(notes)}
	</div>;
}

ආදාන ක්ෂේත්‍ර චක්‍රයක් තුළ සෑදිය හැකි ආකාරය:

function App() {
	const [notes, setNotes] = useState([1, 2, 3]);
	
	function changeHandler(index, event) {
		setNotes([...notes.slice(0, index), event.target.value, ...notes.slice(index + 1)]);
	}
	
	const result = notes.map((note, index) => {
		return <input
			key={index}
			value={note}
			onChange={event => changeHandler(index, event)}
		/>;
	});
	
	return <div>
		{result}
		{getSum(notes)}
	</div>;
}

පහත දැක්වෙන අරාව ලබා දී ඇත:

[1, 2, 3, 4, 5, 6, 7, 8, 9]

මෙම අරාවේ මූලද්‍රව්‍යවල ගණිතමය මධ්‍යන්‍යය තිරය මත ප්‍රදර්ශනය කරන්න. මූලද්‍රව්‍ය සංස්කරණය කිරීම සඳහා චක්‍රයක ආදාන ක්ෂේත්‍ර සාදන්න.