Дар 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]

Миёнаи арифметикии унсурҳои ин массивро ба экран чоп кунед. Дар ҳалқа барои таҳрири унсурҳо воридҳо созед.