Javascript在按Enter键时移除焦点

当我按下enter键时，如何移除任一输入框的焦点

我有以下代码：

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;

根据文档进行编辑，我可以调用一个blur函数来移除焦点，但我不知道如何在提交时触发该函数并将输入字段作为目标

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

值得一提的是，我不想强制覆盖焦点边框。我只希望当我点击已经开始工作的登录按钮或按下回车键时，边框消失

---

提前感谢。

为了调用模糊功能，您需要获取输入标签的实例，您可以使用ref或简单地调用和给出的onpressinter属性

            <Input.Password name="password" onPressEnter={passwordEnterPress} />

很抱歉，我的编辑技巧很差，下面是您可以在代码沙盒中运行的代码。请注意，您必须将鼠标从输入框中取出

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" />
          </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;

---

为了调用blur函数，您需要获取输入标记的实例，您可以使用ref或简单地调用和给出的onPressEnter属性

            <Input.Password name="password" onPressEnter={passwordEnterPress} />

很抱歉，我的编辑技巧很差，下面是您可以在代码沙盒中运行的代码。请注意，您必须将鼠标从输入框中取出

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" />
          </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;

---

为了在按下enter键时从输入中失去焦点，您应该 输入的向上键事件，如下所示

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

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

现在将此函数分配给输入框的on key up事件，如下所示

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

按如下方式将其分配给输入

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

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

两者的作用相同， 触发事件时，event.target是您的目标元素， React提供了使用createRef访问dom元素的方法， event.target和ref.current没有太大区别 但使用引用是很好的，因为使用引用可以访问

---

元素的任何位置，无论事件是否发生

为了在按下enter键时从输入中失去焦点，您应该处理 输入的向上键事件，如下所示

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

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

现在将此函数分配给输入框的on key up事件，如下所示

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

按如下方式将其分配给输入

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

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

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

将其添加到提交表单中

将此添加到提交的表单中

---

更新了答案并提交了表格。检查控制台中的日志

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);
  const formRef = useRef()
  function changeloading() {
    setloadings(true);
    setDisabledLoading(true);
    setTimeout(() => {
      setloadings(false);
    }, 1630);
  }

  function onFinish(values) {
    console.log(values)
  }
  function passwordEnterPress(e) {
    e.target.blur() 
    formRef.current.submit()
  }
  return (
    <div>
      <Card className="home-card">
        <Form ref={formRef} onFinish={onFinish}>
          <Form.Item name="Username">
            <Input name="username" />
          </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;

---

更新了答案并提交了表格。检查控制台中的日志

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);
  const formRef = useRef()
  function changeloading() {
    setloadings(true);
    setDisabledLoading(true);
    setTimeout(() => {
      setloadings(false);
    }, 1630);
  }

  function onFinish(values) {
    console.log(values)
  }
  function passwordEnterPress(e) {
    e.target.blur() 
    formRef.current.submit()
  }
  return (
    <div>
      <Card className="home-card">
        <Form ref={formRef} onFinish={onFinish}>
          <Form.Item name="Username">
            <Input name="username" />
          </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;

---

我认为不需要点击按钮来处理登录。我认为您应该在Submiti表单中处理它，而不是单击按钮来处理登录。您应该在Submitt上的表单中处理它。每当我按enter键时，此按钮将禁用submit按钮，尽管每当我按enter键时，此按钮将禁用submit按钮，但如果我为每个字段创建了ref，是否仍需要onkeyup？否，onkeyup如果您想在按下enter键时失去焦点，例如，我在用户名中按enter键，它应该会失去焦点。与使用handlekeyup相比，这两个字段上的createref有什么区别？如果我为每个字段创建了ref，我是否仍然需要onkeyup？否，onkeyup如果如果您想在enter键上失去焦点，例如，我在用户名中按enter键，它应该会失去焦点。createref在这两个字段上与使用handlekeyup有什么区别？