Mon désir est que la fonction entrée handlechange ne doit affecter que la valeur d'entrée que vous modifiez. Si je modifie l'entrée "Prénom", je souhaite que seul cet état est mis à jour et que la même chose se passe pour le deuxième champ de saisie, "Nom". Suggestions sur la façon dont cela peut être fait est très apprécié.
de
statitObject
4 Réponses :
Vous pouvez modifier votre entrée et ajouter un autre attribut du nom code> code>, puis accédez à la propriété code> nom code> de l'événement et transmettez-le comme nom de propriété sur le "code> setuner (...) code> fonction.
Entrée forte>: p> const handleChange = (event) => {
setUser({...user, [event.target.name]: event.target.value})
}
Il s'agit d'un code approximatif car je ne suis pas en mesure de le tester, mais la théorie doit être identique, peut avoir besoin de peaufiner, vous pouvez utiliser un accesseur de propriété pour mettre à jour votre objet. Il suffit de modifier le HTML légèrement.
manuble () fonction
Cela devrait faire ce que vous attendez - ajouter un attribut de noms à votre entrée correspondant à votre objet d'état qui gère les valeurs.
const MyForm = () => {
const [user, setUser] = useState({
firstName :"",
lastName: "",
});
const handleChange = (event) => {
setUser({ ...user, [event.target.name]: event.target.value })
}
return (
<form>
<input type="text" name="firstName" placeholder="Firstname" onChange={handleChange}/>
<input type="text" name="lastName" placeholder="Lastname" onChange={handleChange}/>
</form>
)
}
const makeHandleChange = key => event => {
setUser({...user, [key]: event.target.value});
};
<input type="text" placeholder="Firstname" onChange={makeHandleChange('firstName')}/>
<input type="text" placeholder="Lastname" onChange={makeHandleChange('lastName')}/>
Avez-vous besoin d'une fonction manublechange pouvant être utilisée pour toutes les entrées?
Oui, actuellement je l'ai résolu en ayant un
Handlechange , un pour chaque entrée. Je souhaite avoir une fonction qui fonctionne pour les deux.