Comment passer un crochet useState au composant parent et mettre à jour un objet ?

J'ai un composant utilisateur et un composant InputField dans React. Je sais que mon code est faux, mais il devrait montrer ce que je prévois de faire. Au lieu d'avoir plusieurs hooks useState pour chaque propriété de l'utilisateur, je souhaite mettre à jour un objet utilisateur où un champ Input peut mettre à jour une propriété spécifique de l'objet utilisateur.

const User = () => {
 const [user, setUser] = useState({
 name: "",
 email: "",
 });
 return (
 <>
 <InputField
 name="name"
 value={user.name}
 onChange={() => setUser({...user, name: value })}
 />
 <InputField
 name="email"
 value={user.email}
 onChange={() => setUser({...user, email: value })}
 />
 </>
 );
};
const InputField = ({ name, value }) => {
 const [value, setValue] = useState("");
 return (
 <input
 type="text"
 id={name}
 value={value}
 onChange={(e) => setValue(e.target.value)}
 />
 );
};

Je pense que ce que je fais avec l' valueaccessoire est correct, mais ce onChangen'est pas correct et c'est mon problème. Comment puis-je passer le setValueup au composant User pour qu'il mette à jour le nom ou l'email?

Solution du problème

Vous devez déplacer votre logique onchange vers le composant parent. Vous pouvez donc créer une fonction onchange dans le parent et la transmettre au champ de saisie. De plus, j'utiliserais simplement l'attribut de nom des cibles pour définir l'état au lieu de définir un identifiant sur l'entrée. Donc quelque chose comme ce qui suit:

const InputField = ({ name, value, onChange }) => {
 return (
 <input
 type="text"
 name={name}
 value={value}
 onChange={onChange}
 />
 );
};
const User = () => {
 const [user, setUser] = useState({
 name: "",
 email: "",
 });
 const onChange = (e) => {
 setUser({
...user,
 [e.target.name]: e.target.value
 })
 }
 return (
 <>
 <InputField
 name="name"
 value={user.name}
 onChange={onChange}
 />
 <InputField
 name="email"
 value={user.email}
 onChange={onChange}
 />
 </>
 );
};