reactjs - 是否可以在 formik 的密码字段上显示大写锁定指示符？

Question

我想在 formik 表单的密码字段上显示大写锁定指示器。我需要检测 onKeyUp 事件，这(检测键盘事件)是否可以使用 formik 和密码字段组件？

Answer 1

这实际上与 Formik 没有任何关系。您可以像在普通输入上一样使用 onKeyDown():

class Login extends React.PureComponent {
  state = { warning: false };

  /**
   * Hide warning when losing focus.
   * @param handleBlur Formik blur event.
   * @param event      Input event.
   */
  onBlur(handleBlur, event) {
    this.setState({ warning: false });
    handleBlur(event);
  }

  /**
   * Detect caps lock being on when typing.
   * @param keyEvent On key down event.
   */
  onKeyDown = keyEvent => {
    if (keyEvent.getModifierState("CapsLock")) {
      this.setState({ warning: true });
    } else {
      this.setState({ warning: false });
    }
  };

  /**
   * Show a password field that detects the caps lock key.
   * @returns Form with a password field.
   */
  render() {
    return (
      <Formik initialValues={{ password: "" }}>
        <Form>
          <label htmlFor="password">Password</label>
          <Field name="password">
            {({ field }) => (
              <input
                {...field}
                id="password"
                onBlur={this.onBlur.bind(this, field.handleBlur)}
                onKeyDown={this.onKeyDown}
                type="password"
              />
            )}
          </Field>
          {this.state.warning && <div>Caps Lock On!</div>}
        </Form>
      </Formik>
    );
  }
}

看到它工作 here .

这是一个最小的例子。我可能会限制 onKeyDown() 检查。