IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

React Discussion :

react textfield material ui


Sujet :

React

  1. #1
    Membre éprouvé
    Profil pro
    Inscrit en
    Juin 2013
    Messages
    1 225
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Juin 2013
    Messages : 1 225
    Par défaut react textfield material ui
    Bonjour,

    J'utilise material ui pour mon projet et j'ai un champ textfield (le champ email). Le problème c'est quand je saisi dedans, la valeur ne change pas et n'apparaît pas non plus à l'écran. Je tape dans le champ mais c'est comme-ci il ne se passe rien.

    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
    import React from "react";
    import withStyles from "@material-ui/core/styles/withStyles";
    import loginPageStyle from "assets/jss/material-kit-react/views/loginPage.jsx";
    import axios from "axios";
    import LoginTemplate from "templates/authentification/LoginTemplate.jsx";
    import {Redirect} from "react-router-dom";
     
    class LoginPage extends React.Component {
      constructor(props) {
        super(props);
        // we use this to make the card to appear after the page has been rendered
        this.state= {
          authentification:{
            email :"",
            password:""
          },
          isAuthenticated: false
        };
     
        this.handleSubmit=this.handleSubmit.bind(this);
      }
     
      componentDidMount() {
      }
     
      handleChange=(event)=> {
        const target= event.target;
        const value= target.value;
        const name= target.name;
     
        let authentification= {...this.state.authentification};
        authentification[name]= value;
        this.setState({authentification});
      }
     
      handleSubmit(event) {
        event.preventDefault();
     
        const authentification= this.state.authentification;
        console.log(authentification);
     
        const params=new URLSearchParams();
        params.append('username',authentification.email);
        params.append('password',authentification.password);
     
        axios.post('/login',params)
        .then(response=> {
          console.log(response);
          this.setState({isAuthenticated: true });
        });
      }
     
      render() {
        console.log("isAuthenticated : " + this.state.isAuthenticated);
        console.log("Email User : " + this.state.authentification.email);
     
        if(this.state.isAuthenticated){
          return <Redirect to={"/dashboard"}/>;
        }else{
          return LoginTemplate.call(this);
        }
      }
    }
    export default withStyles(loginPageStyle)(LoginPage);
    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
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
    133
    134
    135
    136
    137
    138
    import React from 'react'
    // @material-ui/core components
    import InputAdornment from "@material-ui/core/InputAdornment";
    import Icon from "@material-ui/core/Icon";
    // @material-ui/icons
    import Email from "@material-ui/icons/Email";
    // core components
    /*import Header from "components/Header/Header.jsx";
    import HeaderLinks from "components/Header/HeaderLinks.jsx";*/
    import Footer from "components/Footer/Footer.jsx";
    import GridContainer from "components/Grid/GridContainer.jsx";
    import GridItem from "components/Grid/GridItem.jsx";
    import Button from "components/CustomButtons/Button.jsx";
    import Card from "components/Card/Card.jsx";
    import CardBody from "components/Card/CardBody.jsx";
    import CardHeader from "components/Card/CardHeader.jsx";
    import CardFooter from "components/Card/CardFooter.jsx";
    import CustomInput from "components/CustomInput/CustomInput.jsx";
     
    import { FormattedMessage } from 'react-intl';
     
    import TextField from '@material-ui/core/TextField';
     
    export default function () {
      const {classes, ...rest } = this.props;
      const {authentification} = this.state;
      console.log(authentification);
      return (
        <div>
          {/* <Header
            absolute
            color="transparent"
            brand="Material Kit React"
            rightLinks={<HeaderLinks />}
            {...rest}
          /> */}
     
          <div className={classes.pageHeader}
            style={{
              backgroundSize: "cover",
              backgroundPosition: "top center"
            }}
          > 
            <div className={classes.container}>
              <GridContainer justify="center">
                <GridItem xs={12} sm={12} md={4}>
                  <Card>
                    <form onSubmit={this.handleSubmit} className={classes.form} onError={errors => console.log(errors)}>
                      <CardHeader color="primary" className={classes.cardHeader}>
                        <h2>
                          <FormattedMessage id="LoginTemplate.title" defaultMessage="Login"/>
                        </h2>
     
                        <div className={classes.socialLine}>
                          <Button justIcon
                            href="#pablo"
                            target="_blank"
                            color="transparent"
                            onClick={e => e.preventDefault()}
                          >
                            <i className={"fab fa-twitter"} />
                          </Button>
                          <Button justIcon
                            href="#pablo"
                            target="_blank"
                            color="transparent"
                            onClick={e => e.preventDefault()}
                          >
                            <i className={"fab fa-facebook"} />
                          </Button>
     
                          <Button justIcon
                            href="#pablo" 
                            target="_blank"
                            color="transparent"
                            onClick={e => e.preventDefault()}
                          >
                            <i className={"fab fa-google-plus-g"} />
                          </Button>
                        </div>
                      </CardHeader>
     
                      <p className={classes.divider}>
                        <FormattedMessage id="LoginTemplate.classical" defaultMessage="Or Be Classical"/>
                      </p>
     
                      <CardBody>
                        <TextField fullWidth={true}
                          className={classes.margin} 
                          label={<FormattedMessage id="LoginTemplate.email" defaultMessage="Email"/>}
                          id="email"
                          ref="email"
                          name="eamil"
                          type="email"
                          error={authentification.email === "" ? true : false}
                          onChange={this.handleChange}
                          InputProps={{
                            endAdornment: (
                              <InputAdornment position="end">
                                <Email className={classes.inputIconsColor}/>
                              </InputAdornment>
                            ),
                          }}
                        />
     
                        <CustomInput
                          labelText={<FormattedMessage id="LoginTemplate.password" defaultMessage="Password"/>}
                          id="password"
                          formControlProps={{fullWidth: true}}
                          inputProps={{
                            onChange:this.handleChange,
                            type: "password",
                            name:"password",
                            value:authentification.password,
                            endAdornment: (
                              <InputAdornment position="end">
                                <Icon className={classes.inputIconsColor}>lock_outline</Icon>
                              </InputAdornment>
                            )
                          }}
                        />
                      </CardBody>
     
                      <CardFooter className={classes.cardFooter}>
                        <Button type="submit" simple color="primary" size="lg">
                          <FormattedMessage id="LoginTemplate.getStarted" defaultMessage="Get started"/>
                        </Button>
                      </CardFooter>
                    </form>
                  </Card>
                </GridItem>
              </GridContainer>
            </div>
            <Footer whiteFont />
          </div>
        </div>
      )
    }

  2. #2
    Membre Expert
    Avatar de gwyohm
    Homme Profil pro
    Développeur informatique
    Inscrit en
    Octobre 2007
    Messages
    925
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 45
    Localisation : France, Paris (Île de France)

    Informations professionnelles :
    Activité : Développeur informatique

    Informations forums :
    Inscription : Octobre 2007
    Messages : 925
    Par défaut
    Salut,

    To composant a un onChange, donc il est controlled, pour autant, tu n'as pas défini de value...

Discussions similaires

  1. Réponses: 5
    Dernier message: 14/01/2006, 20h30
  2. SQL Dynamique - Materialized view
    Par Simeans2004 dans le forum SQL
    Réponses: 15
    Dernier message: 10/06/2004, 17h56
  3. [debutant] Creation de TextField - champ texte
    Par wkd dans le forum Composants
    Réponses: 3
    Dernier message: 04/06/2004, 14h00
  4. [MX] Textfield et action
    Par Admin dans le forum Flash
    Réponses: 5
    Dernier message: 24/11/2003, 13h47
  5. [Flash MX] Pb d'affichage dans un textfield
    Par dens63 dans le forum Flash
    Réponses: 2
    Dernier message: 04/11/2003, 10h49

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo