Discussion :

[totot]

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>
  )
}

[gwyohm]

Salut,

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