Travailler avec les inputs dans React

Le travail avec les inputs dans React se fait à l'aide d'états. Chaque input se voit attribuer son propre état, contenant la value de l'input.

Regardons un exemple. Supposons que nous ayons un input :

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

Supposons également que nous ayons un état :

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

Attachons notre état à l'attribut value de l'input :

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

Dans ce cas, il en résulte que lorsque l'état change, le texte de l'input changera réactivement.

Cela donne cependant un effet secondaire intéressant : maintenant, lors de l'exécution du code dans le navigateur, il est impossible de modifier le texte dans l'input ! Pourquoi : parce que lors de la saisie de texte dans l'input, l'état value ne change pas, par conséquent, le texte dans l'input ne devrait pas changer.

Essayez par vous-même. Copiez mon code et exécutez-le chez vous. Essayez de modifier le texte dans l'input - vous n'y arriverez pas. Ouvrez la console du navigateur - vous y verrez un avertissement de React. Cet avertissement nous indique que nous avons lié un état à l'input, mais ainsi nous avons bloqué l'input.

Faisons en sorte qu'il soit possible de saisir du texte dans notre input. Pour cela, il faut faire en sorte qu'à la saisie, notre état change pour prendre la valeur actuelle de l'input.

Pour commencer, il faut attacher à l'input l'événement onChange :

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

Cet événement dans React se comporte différemment par rapport au JS natif. Dans React, il se déclenche immédiatement lors du changement de l'input. C'est-à-dire à la saisie ou à la suppression d'un caractère.

Ajoutons maintenant le gestionnaire de notre événement :

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

Dans ce gestionnaire, nous devons lire le texte actuel de l'input et le définir dans l'état à l'aide de la fonction setValue.

Le problème est que le this de cette fonction ne pointera pas vers notre input - telle est la particularité de React. Pour obtenir l'élément dans lequel l'événement s'est produit, nous devons utiliser event.target :

function App() {
	const [value, setValue] = useState('text');
	
	function handleChange(event) {
		console.log(event.target); // référence à l'élément DOM de l'input
	}
	
	return <div>
		<input value={value} onChange={handleChange} />
	</div>;
}

Affichons à l'aide de event.target le texte actuel de l'input :

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

Et maintenant, enregistrons le texte de l'input dans notre état :

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

Maintenant, nous pouvons saisir du texte dans l'input. Dans ce cas, l'état value contiendra toujours le texte actuel de l'input.

Nous pouvons facilement nous en assurer. Affichons le contenu de notre texte dans un paragraphe. Dans ce cas, lors de la saisie de texte dans l'input, le texte saisi apparaîtra automatiquement dans le paragraphe :

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

Nous pouvons réécrire en une version plus compacte avec une fonction fléchée anonyme :

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

Ainsi, pour le fonctionnement de tout input, nous avons besoin de ce qui suit : créer un état pour cet input, lier l'état à l'attribut value de l'input, attacher l'événement onChange à l'input, dans le gestionnaire d'événement, changer l'état de l'input pour son texte.

Ces opérations devront être effectuées pour chaque input. C'est-à-dire, si vous avez deux inputs, alors vous aurez deux états et deux fonctions gestionnaires de l'événement onChange.

Créez deux inputs. Que le texte du premier input s'affiche dans le premier paragraphe, et le texte du deuxième input - dans le deuxième paragraphe.