Discussion :

[LaraDev]

Bonjour

Je me permets de demander votre aide, je suis débutante et j'essaie de modifier les valeurs d'un formulaire profil.
Celui-ci est pré-rempli avec les valeurs données à l'inscription.

Je vois pas trop comment faire.

Merci pour vos réponses

[mathieu]

pour présenter du code source sur ce forum, il est plus pratique de le mettre entre balises "code" (bouton croisillon)

de plus le code ne ressemble pas à du code JavaScript, de quoi s'agit-il ?

[LaraDev]

Code :

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
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
import React, { Component, PropTypes } from 'react';
import SVGInline from 'react-svg-inline';
import { reduxForm } from 'redux-form'
import SVGInline from 'react-svg-inline'
import _ from 'lodash';
 
export const fields = [
    'lastname',
    'firstname',
    'location',
    'email',
    'newsletter',
    'oldPassword',
    'password',
    'password_bis',
    'upload_avatar'
]
 
const submit = (values, dispatch) => {
  return new Promise((resolve, reject) => {
      if ((values.password) !== (values.password_bis)) {
        reject({ password_bis: 'Les mots de passe doivent être identiques', _error: 'Mot de passe erroné' })
      } else {
        dispatch(register(values))
        resolve()
      }
  })
}
 
 
class ProfilForm extends Component {
  render() {
    const {
      fields: { lastname, firstname, location, email, newsletter, oldPassword, password, password_bis, upload_avatar},
      handleSubmit,
      submitting,
      values,
      } = this.props
 
const ProfileContentProfile = ({
    user,
}) => (
    <form className="form" id="profile__update">
        <div className="profile_form">
            <div className="identity">
                <label htmlFor="firstname">prénom</label>
                <input id="firstname" type="text" defaultValue={user.firstname}/>
            </div>
            <div>
                <label htmlFor="lastname">nom</label>
                <input id="lastname" type="text" defaultValue={user.lastname}/>
            </div>
            <div>
                <label htmlFor="email">email</label>
                <input id="email" type="text" defaultValue={user.email}/>
            </div>
            <div>
                <label htmlFor="newsletter">newsletter</label><input id="newsletter" type="checkbox" defaultChecked={user.newsletter} />
            </div>
            <div>
                <label htmlFor="location">localisation</label>
                <select id="location" type="select" defaultValue={user.location_code} >
                    <option value="fr" label="france"/>
                    <option value="de" label="deutshland"/>
                    <option value="en" label="england"/>
                </select>
            </div>
            <div>
                <label htmlFor="avatar">avatar</label>
                <input className="modif_avatar" id="avatar" type="file" />
            </div>
            <div className="mdp">
                <label htmlFor="oldPassword">mot de passe actuel</label>
                <input id="oldPassword" type="password"/>
            </div>
            <div>
                <label htmlFor="newPassword">nouveau mot de passe</label>
                <input id="newPassword" type="password"/>
            </div>
            <div>
                <label htmlFor="confirmNewPassword">confirmer</label>
                <input id="confirmNewPassword" type="password"/>
            </div>
        </div>
        <div className="buttons">
            <button type="reset">Annuler</button>
            <button type="submit" form="profile__update" formAction="#" formEncType="application/x-www-form-urlencoded" formMethod="post">Enregistrer</button>
        </div>
    </form>
);
 
 
ProfileContentProfile.propTypes = {
    user: PropTypes.object.isRequired,
}
 
ProfilForm.propTypes = {
        fields: PropTypes.object.isRequired,
        handleSubmit: PropTypes.func.isRequired,
        submitting: PropTypes.bool.isRequired,
}
 
const mapStateToProps = state => state;
 
const mapDispatchToProps = {
};
 
export default reduxForm({
  form: 'profile',
  fields
}, mapStateToProps,mapDispatchToProps)(ProfileContentProfile)

C'est du JSX

[NoSmoking]

Bonjour,
il faudrait nous en dire plus sur

...j'essaie de modifier les valeurs d'un formulaire profil.

les modifications sont à priori à faire dans const ProfileContentProfile, mais...

[LaraDev]

En fait, c'est comme n'importe onglet profil, je veux que l'utilisateur puisse modifier ses informations et qu'elles soient enregistrées.
Ce n'est pas le même formulaire qu'à l'inscription.

[NoSmoking]

J'ai bien peur que l'on ne puisse apprendre à utiliser ReduxForm à ta place !