React+Antd项目中按下回车键时如何移除输入框的焦点

你可以通过Form组件的统一提交回调 + 输入框ref绑定/当前激活元素判断两种方式实现需求，不需要为每个输入框单独绑定回车事件。

方案1：绑定Input组件ref调用官方blur方法（推荐） #

该方案符合Antd官方API规范，可控性更高：

1. 导入useRef为两个输入框创建ref实例
2. 给Form组件绑定onFinish提交回调，统一处理提交逻辑和失焦逻辑
3. 回调中调用两个输入框ref的blur方法即可

完整修改后代码如下：

import React, { useState, useRef } 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);
  // 为输入框创建ref
  const usernameRef = useRef(null);
  const passwordRef = useRef(null);

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

  // 表单提交统一回调
  const handleFinish = () => {
    changeloading();
    // 调用输入框blur方法移除焦点
    usernameRef.current?.blur();
    passwordRef.current?.blur();
  };

  return (
    <div>
      <Card className="home-card">
        {/* 绑定提交回调 */}
        <Form onFinish={handleFinish}>
          <Form.Item name="Username">
            <Input 
              name="username" 
              ref={usernameRef}
            />
          </Form.Item>
          <Form.Item name="Password">
            <Input.Password 
              name="password" 
              ref={passwordRef}
            />
          </Form.Item>
          <Form.Item>
            <Button
              type="primary"
              htmlType="submit"
            >
              Log in
            </Button>
          </Form.Item>
        </Form>
      </Card>
    </div>
  );
}

export default Login;

方案2：直接操作当前激活元素（适用多输入框场景） #

如果表单字段较多，不想逐个绑定ref，可以直接判断当前页面聚焦的元素是否为输入框，直接调用blur：

const handleFinish = () => {
  changeloading();
  // 直接让当前聚焦的输入框失焦
  if (document.activeElement instanceof HTMLInputElement) {
    document.activeElement.blur();
  }
};

两种方案都不需要修改默认的聚焦样式，和点击登录按钮的失焦效果完全一致，同时适配回车提交和点击按钮提交两种场景。

内容的提问来源于stack exchange，提问作者crimsonpython24