Question

在开发客户端身份验证时，我使用了基本的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>

但是我正在将登录页面转换为引导程序，并遇到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。我认为对象ID与引导程序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>

Answer 1

我意识到我必须打preventDefault()。

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

将输入转换为react-bootstrap时出现问题

1 个答案: