React - 从一个输入元素移除焦点

在本教程中，我们将学习如何在React中从一个input 的元素中移除焦点。

考虑一下，我们的React应用程序中有以下组件。

import React, { useEffect, useRef } from "react";

function App() {
  const searchInput = useRef(null)

  return (
    <div>
      <label>Search </label>
      <input ref={searchInput}  autofocus/>
      <button>Remove focus</button>
    </div>
  );
}

现在，我们需要移除上述输入元素的焦点。

从一个输入元素上移走焦点

要从React的输入元素中移除焦点，首先我们需要使用ref 来访问组件中的元素，然后对其调用一个blur() 方法。

下面是一个例子。

import React, { useEffect, useRef } from "react";

function App() {
  const searchInput = useRef(null);

   function handleFocus(){
    searchInput.current.blur(); // removing focus
  }

  return (
    <div>
      <label>Search </label>
      <input ref={searchInput}  autofocus/>
      <button onClick={handleFocus}>Remove focus</button>    </div>
  );
}

在上面的例子中，我们首先向输入元素添加了一个searchInput ref。因此，我们可以在组件方法中访问和修改输入元素的dom节点。

接下来，我们在handleFocus() 事件处理程序中添加了一个searchInput.current.blur() 方法，所以当Remove focus 按钮被点击时，就会从输入元素中移除焦点。

我们使用HTMLElement.blur()来移除一个元素的焦点。

blur() 方法将键盘焦点从被调用的元素中移除。

如果你想把焦点重新设置到输入元素上，那就在输入元素上调用focus() 方法。

searchInput.current.focus(); // adding the focus