Блог

При разработке моей клиентской аутентификации я использовал базовый html для настройки своего входа:

 <div>
  <input
    name="username"
    onChange={onChangeHandler}
    placeholder="username"
  />
  <input
    name="password"
    type="password"
    onChange={onChangeHandler}
    placeholder="password"
  />
  <button onClick={signIn}>Sign In</button>
</div>
  

Но я конвертирую страницу входа в bootstrap и сталкиваюсь с проблемой с onChange событием:

 function onChangeHandler(event) {
  event.persist();
  console.log(event);
  updateFormState(() => ({
    ...formState,
    [event.target.name]: event.target.value
  }));
}

const { formType } = formState;

async function signIn() {
  try {
    const { username, password } = formState;
    const user = await Auth.signIn(username, password);
    updateFormState(() => ({ ...formState, formType: 'authenticated' }));
  } catch (errors) {
    alert(errors.message);
  }
}
  

события регистрируются аналогично, и я вижу event.target.value , что находится в консоли. Я думаю, что каким-то образом идентификаторы объектов сталкиваются с использованием ControlID начальной загрузки.

Это версия начальной загрузки:

 <Form>
  <Form.Group controlId="formBasicEmail">
    <Form.Label>User Name</Form.Label>
    <Form.Control
      id="username"
      name="username"
      onChange={onChangeHandler}
      placeholder="Enter username"
    />
    <Form.Text className="text-muted">
      We'll never share your email with anyone else.
    </Form.Text>
    <Form.Label>Password</Form.Label>
    <Form.Control
      id="password"
      name="password"
      onChange={onChangeHandler}
      type="password"
      placeholder="Password"
    />
    <Form.Text className="text-muted">
      <i>forgot password</i>
    </Form.Text>
  </Form.Group>
  <Button onClick={signIn} variant="primary" type="submit">
    Sign In
  </Button>
</Form>
  

Я понял, что должен позвонить preventDefault() .

 <Button
  onClick={(event) => {
    event.preventDefault();
    signIn();
  }}
  variant="primary"
  type="submit"
>