Werk met Inputs in React

Werk met inputs in React geskied met behulp van state. Aan elke input word sy eie state toegewys, wat die value van die input bevat.

Kom ons kyk na 'n voorbeeld. Gestel ons het 'n input:

function App() {
	return <div>
		<input />
	</div>;
}

Gestel ons het ook 'n state:

function App() {
	const [value, setValue] = useState('text');
	
	return <div>
		<input />
	</div>;
}

Kom ons bind ons state aan die value attribuut van die input:

function App() {
	const [value, setValue] = useState('text');
	
	return <div>
		<input value={value} />
	</div>;
}

In hierdie geval sal dit beteken dat wanneer die state verander, sal die input se teks reaktief verander.

Dit gee egter 'n interessante newe-effek: nou, wanneer die kode in die blaaier uitgevoer word, is dit onmoontlik om die teks in die input te verander! Hoekom: omdat wanneer teks in die input ingevoer word, verander die state value nie, en gevolglik moet die teks in die input ook nie verander nie.

Probeer self. Kopieer my kode en voer dit uit by jou. Probeer om die teks in die input te verander - jy sal niks kan doen nie. Maak die blaaier se konsool oop - jy sal 'n waarskuwing van React daarin sien. Hierdie waarskuwing wys vir ons dat ons state aan die input gebind het, maar sodoende die input geblokkeer het.

Kom ons sorg dat ons teks in ons input kan invoer. Om dit te doen, moet ons maak sodat wanneer ingevoer word, ons state verander na die huidige waarde van die input.

Om mee te begin, moet ons op die input die gebeurtenis onChange plaas:

function App() {
	const [value, setValue] = useState('text');
	
	return <div>
		<input value={value} onChange={handleChange} />
	</div>;
}

Hierdie gebeurtenis in React gedra hom anders in vergelyking met suiwer JS. In React vind dit plaas dadelik wanneer die input verander. Dit wil sê wanneer 'n karaktor ingevoer of verwyder word.

Kom ons voeg nou ons gebeurtenishanter by:

function App() {
	const [value, setValue] = useState('text');
	
	function handleChange() {
		
	}
	
	return <div>
		<input value={value} onChange={handleChange} />
	</div>;
}

In hierdie hanterer moet ons die huidige teks van die input lees en dit in die state plaas met behulp van die funksie setValue.

Die probleem is dat this van hierdie funksie nie na ons input sal wys nie - dit is 'n eienskappy van React. Om die element te kry waarin die gebeurtenis plaasgevind het, moet ons event.target gebruik:

function App() {
	const [value, setValue] = useState('text');
	
	function handleChange(event) {
		console.log(event.target); // verwysing na die DOM element van die input
	}
	
	return <div>
		<input value={value} onChange={handleChange} />
	</div>;
}

Kom ons toon die huidige teks van die input met behulp van event.target:

function App() {
	const [value, setValue] = useState('text');
	
	function handleChange(event) {
		console.log(event.target.value); // huidige teks van die input
	}
	
	return <div>
		<input value={value} onChange={handleChange} />
	</div>;
}

En nou skryf ons die teks van die input in ons state:

function App() {
	const [value, setValue] = useState('text');
	
	function handleChange(event) {
		setValue(event.target.value);
	}
	
	return <div>
		<input value={value} onChange={handleChange} />
	</div>;
}

Nou kan ons teks in die input invoer. Met dit sal die state value altyd die huidige teks van die input bevat.

Ons kan maklik hiervan oortuig word. Laat ons die inhoud van ons teks in 'n paragraaf toon. In hierdie geval, wanneer teks in die input ingevoer word, sal die ingevoerde teks outomaties in die paragraaf verskyn:

function App() {
	const [value, setValue] = useState('');
	
	function handleChange(event) {
		setValue(event.target.value);
	}
	
	return <div>
		<input value={value} onChange={handleChange} />
		<p>text: {value}</p>
	</div>;
}

Ons kan dit herskryf na 'n meer kompakte weergawe met 'n anonieme pylfunksie:

function App() {
	const [value, setValue] = useState('');
	
	return <div>
		<input value={value} onChange={event => setValue(event.target.value)} />
		<p>text: {value}</p>
	</div>;
}

Dus, vir die werking van enige input het ons die volgende nodig: skep 'n state vir daardie input, bind die state aan die value attribuut van die input, plaas die gebeurtenis onChange op die input, en in die gebeurtenishanter, verander die state van die input na sy teks.

Hierdie operasies sal met elke input uitgevoer moet word. Dit wil sê, as jy twee inputs het, dan sal jy twee state en twee gebeurtenishanterfunksies vir die gebeurtenis onChange hê.

Maak twee inputs. Laat die teks van die eerste input in die eerste paragraaf vertoon word, en die teks van die tweede input - in die tweede paragraaf.