Блог

Что-то не так с компонентом TextField из Material UI, которого мне не хватает? Мой handleChange просто не вызывается. Я могу ввести значение во входных данных, но состояние компонента не меняется.

Вот компонент аутентификации:

 const Auth = () => {

  const [formData, setFormData] = useState(initialFormState)

  const handleSubmit = (e) => {
    e.preventDefault(); 

    console.log(formData);
  }

  const handleChange = (e) => {

    setFormData({
      ...formData,
      [e.target.name]: e.target.value
    })
  }

  return ( 
    <Container component="main" maxWidth="xs">
      <Paper className={classes.paper} elevation={3}>

        <form className={classes.form} onSubmit={handleSubmit}>
          <Grid container spacing={2}>

            <Input name="email" label="e-mail" handleChange={handleChange} type="email" />
            <Input name="password" label="password" handleChange={handleChange} type={showPassword ? "text" : "password"} handleShowPassword={handleShowPassword} />

          </Grid>

          <Button type="submit" variant="contained" color="primary" className={classes.submit} fullWidth>
            {isSignup ? "Sign up" : "Sign in"}
          </Button>

        </form>

      </Paper>
    </Container>
  );
}
 

И входной компонент, который находится внутри Auth:

 const Input = ({ name, half, handleChange, type, label, autoFocus, handleShowPassword  }) => {

  return ( 
    <>
      <Grid item xs={12} sm={half ? 6 : 12}>
        <TextField 
          name={name}
          handleChange={handleChange}
          variant="outlined"
          required
          fullWidth
          label={label}
          autoFocus={autoFocus}
          type={type}
          InputProps={name === "password" ? {
            endAdornment: (
              <InputAdornment position="end">
                <IconButton onClick={handleShowPassword}>
                  {type === "password" ? <Visibility/> : <VisibilityOff/>}
                </IconButton>
              </InputAdornment>
            )
          } : null}
        />
      </Grid>
    </>
   );
}
 

Вы должны изменить входной атрибут с handleChange на onChange

 <Input name="email" label="e-mail" onChange={handleChange} type="email" />
<Input name="password" label="password" onChange={handleChange} type={showPassword ? "text" : "password"} handleShowPassword={handleShowPassword} />