material ui textfield cannot editable

Question

I use material UI and a field text of type TextField. But when I was seized in my field email, the seizure does not appear to the screen and the value does not change in the email field.It always remains the same value.

Handle change is not working. the value is not passing to the handleChanges remains the same value

<TextField fullWidth={true}
  className={classes.margin}
  label={<FormattedMessage id="LoginTemplate.email" defaultMessage="Email" />}
  id="email"
  ref="email"
  name="eamil"
  type="email"
  value={authentification.email}
  onChange={this.handleChange}
  InputProps={{
    endAdornment: (
      <InputAdornment position="end">
        <Email className={classes.inputIconsColor} />
      </InputAdornment>
    ),
  }}
/>

Here is the code. Correct me What is the issue in that Thanks in Advance.

Answer 1

In order to make the value change, you need to change a state (in the screen or external).

For instance (with bad performance but just to explain): add to your cunstrunctor if exists:

constructor(props) {
  super(props);
  this.state = {
    emailInputText: undefined //or empty string
  }
}

Then change TextField component value and onChange props to:

value={this.state.emailInputText}
onChange={(text) => this.setState({emailInputText: text})}

I will consider to remove the ref='email' .