Att arbeta med inputs i React

Att arbeta med inputs i React sker med hjälp av states. Varje input tilldelas ett eget state som innehåller inputens value.

Låt oss titta på ett exempel. Låt oss säga att vi har en input:

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

Låt oss också säga att vi har ett state:

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

Låt oss binda vårt state till inputens value-attribut:

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

I så fall blir resultatet att när statet ändras, kommer inputens text att ändras reaktivt.

Detta ger dock en intressant bieffekt: nu när koden körs i webbläsaren är det omöjligt att ändra texten i inputfältet! Varför: för att när text skrivs in i inputfältet ändras inte statet value, följaktligen bör inte texten i inputfältet ändras heller.

Prova själv. Kopiera min kod och kör den hos dig. Försök ändra texten i inputfältet - du kommer inte att lyckas. Öppna webbläsarens konsol - du kommer att se en varning från React där. Denna varning indikerar för oss att vi har bundit ett state till inputfältet, men därmed har låst inputfältet.

Låt oss se till att vi kan skriva text i vår input. För att göra detta måste vi se till att när vi skriver in text ändras vårt state till inputfältets aktuella värde.

Först och främst behöver vi lägga en händelsehanterare för onChange på inputfältet:

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

Denna händelse i React beter sig annorlunda jämfört med vanlig JS. I React utlöses den omedelbart vid förändring av inputfältet. Det vill säga när en symbol skrivs in eller tas bort.

Låt oss nu lägga till hanteraren för vår händelse:

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

I denna hanterare måste vi läsa inputfältets aktuella text och sätta den i statet med hjälp av funktionen setValue.

Problemet är att this för denna funktion inte kommer att peka på vår input - sådan är egenskapen hos React. För att få elementet där händelsen inträffade måste vi använda event.target:

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

Låt oss med hjälp av event.target skriva ut inputfältets aktuella text:

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

Och nu skriver vi inputfältets text till vårt state:

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

Nu kan vi skriva text i inputfältet. Samtidigt kommer statet value alltid att innehålla inputfältets aktuella text.

Vi kan lätt övertyga oss om detta. Låt oss skriva ut innehållet i vår text i ett stycke. I detta fall, när text skrivs in i inputfältet, kommer den inmatade texten automatiskt att dyka upp i stycket:

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

Vi kan skriva om till en mer kompakt variant med en anonym arrow-funktion:

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

Således, för att få en input att fungera behöver vi följande: skapa ett state för denna input, bind statet till inputens value-attribut, lägga till en onChange-händelse på inputfältet, i händelsehanteraren ändra inputens state till dess text.

Dessa operationer måste utföras för varje input. Det vill säga, om du har två inputs, kommer du att ha två states och två funktioner-hanterare för onChange-händelsen.

Skapa två inputs. Låt texten från den första inputen skrivas ut i det första stycket, och texten från den andra inputen - i det andra stycket.