Binda inmatningar till en array i React

Låt tillståndet notes innehålla en array:

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

Låt oss också ha en hjälpfunktion som beräknar summan av arrayelement:

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

function App() {
	...
}

Låt oss beräkna och visa summan av elementen i vår array från tillståndet, med hjälp av vår hjälpfunktion:

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

Låt oss nu skapa tre inmatningar och i value för varje inmatning skriva ett av arrayelementen:

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

Låt oss nu lägga till händelsen onChange till våra inmatningar. Vi ska göra en gemensam hanteringsfunktion för denna händelse:

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

Som du ser tar funktionen changeHandler som första parameter numret på det arrayelement som denna inmatning redigerar.

Med detta nummer kan vi ersätta arrayelementet med innehållet i inmatningen.

Låt oss göra detta:

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

Nu kommer det att vara möjligt att redigera vilken inmatning som helst, samtidigt som arrayen reaktivt ändras och följaktligen räknas summan av dess element om.

Låt oss samla all vår kod tillsammans:

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

Det är möjligt att göra så att inmatningar genereras i en loop:

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

Följande array ges:

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

Visa medelvärdet av elementen i denna array på skärmen. Gör inmatningar för att redigera elementen i en loop.