Ievades lauku saistīšana ar masīvu React

Pieņemsim, ka stāvoklī notes tiek glabāts masīvs:

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

Pieņemsim, ka mums ir arī palīgfunkcija, kas atrod masīva elementu summu:

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

function App() {
	...
}

Atradīsim un izvadīsim mūsu masīva elementu summu no stāvokļa, izmantojot mūsu palīgfunkciju:

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

Tagad izveidosim trīs ievades laukus un value katra ievades laukā ierakstīsim vienu no masīva elementiem:

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>;
}

Tagad pievienosim onChange notikumu mūsu ievades laukiem. Tajā pašā laikā izveidosim vienu kopīgu funkciju-apstrādātāju šim notikumam:

function App() {
	const [notes, setNotes] = useState([1, 2, 3]);
	
	function changeHandler(index, event) {
		// kopīga funkcija-apstrādātājs
	}
	
	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>;
}

Kā jūs varat redzēt, funkcija changeHandler kā pirmo parametru pieņem tā masīva elementa numuru, ko rediģē šis ievades lauks.

Pēc šī numura mēs varam aizstāt masīva elementu ar ievades lauka saturu.

Izdarīsim to:

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

Tagad būs iespējams rediģēt jebkuru ievades lauku, vienlaikus reaģējotīgi mainīsies masīvs un, attiecīgi, pārrēķināsies tā elementu summa.

Apvienosim visu mūsu kodu kopā:

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>;
}

Var izveidot tā, lai ievades lauki tiktu veidoti ciklā:

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>;
}

Dots šāds masīvs:

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

Izvadiet ekrānā šī masīva elementu vidējo aritmētisko. Ciklā izveidojiet ievades laukus elementu rediģēšanai.