Arbeiten mit Inputs in React

Die Arbeit mit Inputs in React erfolgt mit States. Jeder Input erhält einen eigenen State, der den value des Inputs enthält.

Schauen wir uns ein Beispiel an. Nehmen wir an, wir haben einen Input:

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

Nehmen wir außerdem an, wir haben einen State:

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

Binden wir unseren State an das Attribut value des Inputs:

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

In diesem Fall führt dies dazu, dass bei einer Änderung des States, der Text des Inputs reaktiv geändert wird.

Dies hat jedoch einen interessanten Nebeneffekt: Wenn man den Code im Browser ausführt, ist es unmöglich, den Text im Input zu ändern! Warum: Weil sich bei der Texteingabe in den Input der State value nicht ändert, folglich sollte sich auch der Text im Input nicht ändern.

Versuchen Sie es selbst. Kopieren Sie meinen Code und führen Sie ihn bei sich aus. Versuchen Sie, den Text im Input zu ändern - es wird Ihnen nicht gelingen. Öffnen Sie die Browserkonsole - Sie werden eine Warnung von React sehen. Diese Warnung weist uns darauf hin, dass wir einen State an den Input gebunden, aber damit den Input blockiert haben.

Lassen Sie uns es so einrichten, dass man in unseren Input Text eingeben kann. Dazu muss man sicherstellen, dass bei der Eingabe unser State auf den aktuellen Wert des Inputs gesetzt wird.

Dazu muss zunächst das Event onChange auf den Input gelegt werden:

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

Dieses Event verhält sich in React anders im Vergleich zu purem JS. In React wird es sofort bei einer Änderung des Inputs ausgelöst. Das heißt bei der Eingabe oder Löschung eines Zeichens.

Fügen wir nun unseren Event-Handler hinzu:

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

In diesem Handler müssen wir den aktuellen Text des Inputs auslesen und ihn mit Hilfe der Funktion setValue in den State setzen.

Das Problem ist, dass this in dieser Funktion nicht auf unseren Input zeigen wird - das ist eine Besonderheit von React. Um das Element zu erhalten, in dem das Event stattfand, müssen wir event.target verwenden:

function App() {
	const [value, setValue] = useState('text');
	
	function handleChange(event) {
		console.log(event.target); // Referenz auf das DOM-Element des Inputs
	}
	
	return <div>
		<input value={value} onChange={handleChange} />
	</div>;
}

Geben wir mit event.target den aktuellen Text des Inputs aus:

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

Und nun schreiben wir den Text des Inputs in unseren State:

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

Jetzt können wir Text in den Input eingeben. Dabei wird der State value immer den aktuellen Text des Inputs enthalten.

Davon können wir uns leicht überzeugen. Geben wir den Inhalt unseres Textes in einem Absatz aus. In diesem Fall wird bei der Texteingabe in den Input der eingegebene Text automatisch im Absatz erscheinen:

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

Wir können dies in eine kompaktere Variante mit einer anonymen Pfeilfunktion umschreiben:

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

Für die Funktionsweise eines beliebigen Inputs benötigen wir daher Folgendes: Einen State für diesen Input erstellen, den State an das Attribut value des Inputs binden, das Event onChange auf den Input legen, im Event-Handler den State des Inputs auf dessen Text setzen.

Diese Operationen müssen für jeden Input durchgeführt werden. Das heißt, wenn Sie zwei Inputs haben, werden Sie zwei States und zwei Event-Handler-Funktionen für das Event onChange haben.

Erstellen Sie zwei Inputs. Der Text des ersten Inputs soll im ersten Absatz ausgegeben werden, und der Text des zweiten Inputs - im zweiten Absatz.