Liaison des champs de saisie à un objet dans React

Supposons qu'un objet soit stocké dans l'état :

const initObj = {
	prop1: 'value1',
	prop2: 'value2',
	prop3: 'value3',
}

function App() {
	const [obj, setObj] = useState(initObj);
	
	return <div>
		{obj.prop1}-{obj.prop2}-{obj.prop3}
	</div>;
}

Affichons chaque propriété de notre objet dans un champ de saisie séparé :

function App() {
	const [obj, setObj] = useState(initObj);
	
	return <div>
		<input value={obj.prop1} />
		<input value={obj.prop2} />
		<input value={obj.prop3} />
		
		<br />
		{obj.prop1}-{obj.prop2}-{obj.prop3}
	</div>;
}

Associons maintenant à chaque champ de saisie l'événement onChange. Assignons une fonction commune comme gestionnaire :

function App() {
	const [obj, setObj] = useState(initObj);
	
	return <div>
		<input value={obj.prop1} onChange={event => handleChange('prop1', event)} />
		<input value={obj.prop2} onChange={event => handleChange('prop2', event)} />
		<input value={obj.prop3} onChange={event => handleChange('prop3', event)} />
		
		<br />
		{obj.prop1}-{obj.prop2}-{obj.prop3}
	</div>;
}

Comme vous pouvez le voir, la fonction handleChange accepte comme premier paramètre le nom de la propriété correspondante de l'objet.

Écrivons l'implémentation de notre fonction :

function handleChange(prop, event) {
	const copy = Object.assign({}, obj);
	copy[prop] = event.target.value;
	setObj(copy);
}

Cette implémentation fonctionne, mais elle peut être simplifiée en utilisant les noms de propriétés calculés d'un objet :

function handleChange(prop, event) {
	setObj({...obj, ...{[prop]: event.target.value}});
}

Rassemblons tout le code :

function App() {
	const [obj, setObj] = useState(initObj);
	
	function handleChange(prop, event) {
		setObj({...obj, ...{[prop]: event.target.value}});
	}
	
	return <div>
		<input value={obj.prop1} onChange={event => handleChange('prop1', event)} />
		<input value={obj.prop2} onChange={event => handleChange('prop2', event)} />
		<input value={obj.prop3} onChange={event => handleChange('prop3', event)} />
		
		<br />
		{obj.prop1}-{obj.prop2}-{obj.prop3}
	</div>;
}

Supposons qu'une date soit stockée dans l'état sous forme d'objet :

const initDate = {
	year:  2025,
	month: 12,
	day:   31,
}

Affichez dans un paragraphe l'année, le mois et le jour de la date stocker dans l'état, ainsi que le jour de la semaine qui lui correspond.

Modifiez la tâche précédente en ajoutant trois champs de saisie pour modifier la date.