Javascript 移除对 Enter 键按下的关注

Question

当我按下“回车”键时，如何取消任一输入框的焦点？

我有这个代码:

import React, { useState } from "react";

import "antd/dist/antd.css";
import { Form, Input, Button, Card } from "antd";

function Login() {
  const [loadings, setloadings] = useState(false);
  const [disabledLoading, setDisabledLoading] = useState(false);

  function changeloading() {
    setloadings(true);
    setDisabledLoading(true);
    setTimeout(() => {
      setloadings(false);
    }, 1630);
  }

  function passwordEnterPress(e) {
    e.target.blur();
  }

  return (
    <div>
      <Card className="home-card">
        <Form>
          <Form.Item name="Username">
            <Input name="username" onPressEnter={passwordEnterPress} />
          </Form.Item>
          <Form.Item name="Password">
            <Input.Password name="password" onPressEnter={passwordEnterPress} />
          </Form.Item>
          <Form.Item>
            <Button
              type="primary"
              htmlType="submit"
              onClick={() => changeloading()}
            >
              Log in
            </Button>
          </Form.Item>
        </Form>
      </Card>
    </div>
  );
}

export default Login;

Codesandbox

根据文档

编辑 link ，有一个 blur 函数，我可以调用它来移除焦点，但我不知道如何在提交和定位输入字段时触发该函数。

如果我选择任一输入，它将被聚焦；但是，当我按“enter”提交表单时，焦点不会消失。 我希望每当我按下提交表单的“enter”键时焦点消失。

值得一提的是，我不想强​​行覆盖焦点边框。我只希望每当我单击登录按钮(已经可以使用)或按“输入”键(这个问题的全部内容)时边框消失。

提前致谢。

Answer 1

为了在按下回车键时从输入中失去焦点，你应该处理input的key up事件，如下图

function handleKeyUp(event) {
 //key code for enter
 if (event.keyCode === 13) {
   event.preventDefault();
   event.target.blur();
 }
}

现在像这样把这个函数赋值给输入框的 on key up 事件

<Input name="username" onKeyUp={handleKeyUp} />

现在清除表单提交输入的焦点，您可以创建对两个输入的引用，如下所示

let userNameRef = React.createRef();
let passwordRef = React.createRef();

如下所示将其分配给输入

<Input ref={userNameRef} name="username" onKeyUp={handleKeyUp} />
 <Input.Password ref={passwordRef} name="password" />

随时使用这些引用来清除焦点

userNameRef.current.blur();
passwordRef.current.blur();

已编辑这两个字段上的createref与使用handlekeyup相比有什么区别？

两者的作用相同，当事件触发时，event.target 是你的目标元素，而 React 提供了使用 createRef 访问 dom 元素的方法，event.target 和 ref.current 没有太大区别但最好使用引用，因为使用引用可以访问任何地方的元素，无论事件是否发生