是否可以在 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>
    );
  }
}

看到它在这里工作。

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

Answer 2

旧，但这里有一个使用 TypeScript 的钩子：

import { useEffect, useState } from 'react';
type KeyLock = 'CapsLock' | 'NumLock' | 'ScrollLock';
const useKeyLock = (key: KeyLock) => {
  const [toggled, setToggled] = useState(false);
  useEffect(() => {
    const onKeyDown = (event: KeyboardEvent) => setToggled((pToggled) => event.getModifierState?.(key) ?? pToggled);
    document.addEventListener('keydown', onKeyDown);
    return () => document.removeEventListener('keydown', onKeyDown);
  }, [key]);
  return toggled;
};
export default useKeyLock;

它可以像

const YourForm = () => {
  const capsLock = useKeyLock('CapsLock');
  return (
    <form>
      <label>Password</label>
      <input type="password" />
      {capsLock && <div>Caps Lock Enabled</div>}
    </form>
  )
}