Invoervelde aan 'n skikking bind in React

Laat daar in die toestand notes 'n skikking gestoor word:

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

Laat ons ook 'n hulpfunksie hê wat die som van die skikking se elemente vind:

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

function App() {
	...
}

Kom ons vind en toon die som van die elemente van ons skikking vanuit die toestand, deur ons hulpfunksie te gebruik:

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

Laat ons nou drie invoervelde maak en in value van elke invoerveld een van die skikking se elemente sit:

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

Laat ons nou die gebeurtenis onChange by ons invoervelde voeg. Laat ons dit doen met een algemene hanteringsfunksie vir hierdie gebeurtenis:

function App() {
	const [notes, setNotes] = useState([1, 2, 3]);
	
	function changeHandler(index, event) {
		// algemene hanteringsfunksie
	}
	
	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>;
}

Soos jy kan sien, neem die funksie changeHandler as eerste parameter die nommer van daardie skikkingelement wat deur hierdie invoerveld geredigeer word.

Aan die hand van hierdie nommer kan ons die element van die skikking vervang met die inhoud van die invoerveld.

Laat ons dit doen:

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

Nou kan enige invoerveld geredigeer word, en die skikking sal reaktief verander en dienooreenkomstig sal die som van sy elemente herbereken word.

Laat ons al ons kode saamstel:

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

Daar kan gedoen word sodat die invoervelde in 'n lus gegenereer word:

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

Die volgende skikking word gegee:

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

Toon die rekenkundige gemiddelde van hierdie skikking se elemente op die skerm. Maak in 'n lus invoervelde om die elemente te redigeer.