Получение неконтролируемой ошибки ввода, даже если все контролируется - PullRequest
Новая
       25

Получение неконтролируемой ошибки ввода, даже если все контролируется

0 голосов
/ 18 октября 2019

Мне нужна ваша помощь, я пытаюсь использовать форму из реактивного ремешка и по какой-то причине я получаю эту ошибку:

Предупреждение: компонент меняет контролируемый ввод пароля типа на неконтролируемый,Входные элементы не должны переключаться с контролируемого на неуправляемый (или наоборот). Решите, использовать контролируемый или неконтролируемый элемент ввода для времени жизни компонента

. Это мой код. все контролируется, но я все еще получаю ошибку, кто-нибудь может определить мою ошибку? 

const LoginForm = () => {
  const [formData, setFormData] = useState({
    email: " ",
    password: " "
  });
  const onChange = e => {
    setFormData({
      [e.target.name]: e.target.value
    });
  };
  const onSubmit = e => {
    e.preventDefault();
    console.log("email password are", formData.email, formData.password);
    loginUser(formData.email, formData.password);
  };
  return (
    <Form onSubmit={onSubmit}>
      <FormGroup>
        <h1>Login</h1>
      </FormGroup>
      <FormGroup>
        <Label for="Email">Email</Label>
        <Input
          type="email"
          name="email"
          id="Email"
          placeholder="example@mail.com"
          onChange={onChange}
          value={formData.email}
        />
      </FormGroup>
      <FormGroup>
        <Label for="Password">Password</Label>
        <Input
          type="password"
          name="password"
          id="Password"
          placeholder="password"
          onChange={onChange}
          value={formData.password}
        />
      </FormGroup>
      <Button>Submit</Button>
    </Form>
  );
};

1 Ответ

0 голосов
/ 18 октября 2019

Хорошо, я обнаружил ошибку, я не выкладывал последний ответ, поэтому, введя пароль, я перезаписал свое электронное письмо, правильное изменение должно быть таким: 

const onChange = e => {
    setFormData({ ...formData, [e.target.name]: e.target.value });
  };
...