Discussion :

[Huyenlong]

Salut

Je suis un tutorial et je bute sur une partie du code.
Dans ce code j'ai compris lorsqu'on rentre une valeur elle change le state puis on l'envoie

Code js :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
import React, { useState } from 'react'
 
const AddUserForm = props => {
  const initialFormState = { id: null, name: '', username: '' }
  const [user, setUser] = useState(initialFormState)
 
  const handleInputChange = event => {
    const { name, value } = event.target
 
    setUser({ ...user, [name]: value })
  }
 
  return (
    <form
      onSubmit={event => {
        event.preventDefault()
        if (!user.name || !user.username) return
 
        props.addUser(user)
        setUser(initialFormState)
      }}
    >
      <label>Name</label>
      <input type="text" name="name" value={user.name} onChange={handleInputChange} />
      <label>Username</label>
      <input type="text" name="username" value={user.username} onChange={handleInputChange} />
      <button>Add new user</button>
    </form>
  )
}
 
export default AddUserForm

Je bute donc sur un bout de code, en essayant de le comprendre tout seul j'ai du apprendre et comprendre le destructuring et le hook, mais toujours incomprhéensible.

A la ligne 25 on change bien la valeur du state pour le [name], car à la ligne 11 on a :

Code js :

Sélectionner tout - Visualiser dans une fenêtre à part

  setUser({ ...user, [name]: value })

à la ligne 27 :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

 <input type="text" name="username" value={user.username} onChange={handleInputChange} />

Comment ce fait se que ce input puisse envoyer ça valeur directement dans le user.username alors que :

Code js :

Sélectionner tout - Visualiser dans une fenêtre à part

  setUser({ ...user, [name]: value })

Ne touche que la valeur du name ?

Merci pour l'aide.

[gwyohm]

Salut,

dans ce code :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

setUser({ ...user, [name]: value })

name est entre crochets, on utilise donc la valeur de la variable name comme clé.

[Huyenlong]

Merci.

J'ai fait tourné plusieurs fois ta réponse dans ma tête et j'ai compris ceci avec mes connaissances acquises :

Lorsqu'on tape une lettre, elle va directement dans la value de l'event qui modifie soit la valeur de [user.name] ou [user.username]

Code js :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
setUser({ ...user, [name]: value })

Les deux points ":" veulent dire qu'on renomme le [name]. Là grâce au value de l'event, le [name] devient [user.name] ou [user.username]. Et là le setUser, modifie au final la bonne variable.

J'espère que c'est une bonne logique d'écrite