ReactJS 如何在渲染后对一个输入字段设置焦点

在 React 中处理表单时，有时我们可能需要对任何输入进行聚焦。例如，我们希望只有当用户在输入字段中输入一些文本时才启用提交按钮。在这种情况下，我们可以关注输入，让用户知道他们必须在输入框中输入一些文本才能启用按钮。

在本教程中，我们将学习在ReactJS中渲染后聚焦于输入字段的多种方法。

对输入字段使用自动对焦属性

我们可以在HTML中使用autofocus属性来关注输入字段，但我们需要在camelCase中使用该属性，如autoFocus。

当我们把autoFocus属性传递给任何输入字段时，它在ReactJS中渲染后会自动成为焦点。

语法

用户可以按照下面的语法来使用autoFocus属性，在ReactJS中渲染后聚焦于一个输入字段。

<input id = "name" autoFocus />

在上面的语法中，我们创建了简单的输入并使用了autoFocus属性。

例子

在下面的例子中，我们已经创建了一个输入字段。同时，我们将focusText变量绑定为输入字段的一个值。同时，我们使用handleInput()函数来处理输入值。

由于我们给输入字段添加了autoFocus属性，每当我们刷新网页时，它就会自动在输入字段上创建焦点。

#App.js

import React, { useState } from "react";

export default function App() {
   const [foucsText, setFocusText] = useState(true);
   function handleInput(event) {
      let value = event.target.value;
      setFocusText(value);
   }
   return (
      <div className = "App">
         <h2>
            {" "}
            Using the <i> autoFocus </i> attribute with an input field to set focus on
            input after rendering. {" "}
         </h2>
         <label for = "name"> Enter some text: </label>
         <br></br>
         <input id = "name" autoFocus onInput = {handleInput} value = {foucsText} />
      </div>
   );
}

输出

使用ref和componentDidMount()方法

ref允许我们在变量中存储任何HTML元素的引用。因此，我们可以使用ref将输入元素存储在任何变量中。之后，我们可以使用变量的focus()方法来关注输入。

componentDidMount()方法是ReactJS的一个生命周期方法。它在组件的渲染完成后自动执行。因此，我们可以在componentDidMount() 方法中使用focus()方法和输入变量，在渲染后将焦点设置在输入上。

语法

用户可以按照下面的语法，在输入元素上使用ref，将焦点放在输入元素上。

<input
   ref = {(inp) => {
      inp.focus();
   }}
/>

在上面的语法中，我们使用了ref，它把回调函数作为一个值，在回调函数中，我们使用focus()方法来设置输入元素的焦点。

例子

在下面的例子中，我们创建了两个输入元素。我们对第二个输入元素使用了 ref，而第一个输入元素是正常的，没有 ref 属性。

ref属性把回调函数作为一个值。回调函数需要一个参数，指的是使用了 “ref “的输入。之后，我们可以对该输入使用focus()方法，并在该输入元素上设置焦点。

import React from "react";

class App extends React.Component {
   render() {
      return (
         <div>
            <h2>
               {" "}
               Using the <i> refs </i> with an input field to set focus on
               input after rendering.{" "}
            </h2>
            <input defaultValue = "This input is not focused!" />
            <br></br>
            <br></br>
            <input
               ref = {(inp) => {
                  inp.focus();
               }}
               defaultValue = "This is focused input!"
            />
         </div>
      );
   }
}
export default App;

输出

在上面的输出中，用户可以观察到，第一个输入是没有焦点的，而第二个是有焦点的。

例子

在下面的例子中，我们使用’ref’属性来获取输入参考。之后，我们在类组件中使用了componentDidMount()方法，在该方法中，我们访问了输入，并使用focus()方法来设置元素的焦点。

import React from "react";

class App extends React.Component {
   componentDidMount() {
      this.secondInput.focus();
   } 
   render() {
      return (
         <div>
            <h2>
               {" "}
               Using the <i> refs and componentDidMount() method </i> with an input
               field to set focus on input after rendering.{" "}
            </h2>
            <input
               defaultValue = "This input is not focused!"
               ref = {(firstInp) => {
                  this.firstInput = firstInp;
               }}
            />
            <br></br>
            <br></br>
            <input
               ref = {(secondInput) => {
                  this.secondInput = secondInput;
               }}
               defaultValue = "This is focused input!"
            />
         </div>
      );
   }
}

export default App;

输出

使用ref和useRef()钩子

正如我们上面所讨论的，我们可以使用’ref’属性来获取一个元素的引用。useRef()是功能组件中的一个钩子，它被类组件的生命周期方法所取代。

我们可以使用useEffect()钩子，在渲染完成后将焦点设置在输入字段上。

语法

用户可以按照下面的语法来使用useRef()和useEffect()钩子，在渲染后将焦点设置在输入框上。

useEffect(() => {
   input.current.focus();
}, []);

在上面的语法中，我们把回调函数作为第一个参数传给了输入端，并把[]作为第二个参数，表示在渲染组件后只设置一次焦点。

例子

在下面的例子中，首先，我们使用useRef()来创建一个引用，并将其存储在testRef变量中。之后，我们使用’ref’属性将输入的引用分配给testRef变量。

接下来，我们在useEffect()钩子中使用testRef输入变量，在渲染后将焦点设置在输入上。

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

export default function App() {
   const testRef = useRef();
   useEffect(() => {
      testRef.current.focus();
   }, []);

   const [foucsText, setFocusText] = useState("");
   function handleInput(event) {
      let value = event.target.value;
      setFocusText(value);
   }
   return (
      <div className = "App">
         <h2>
            {" "}
            Using the <i> useEffect hooks </i> with an input field to set focus on
            input after rendering.{" "}
         </h2>
         <label for = "name">Enter some text: </label>
         <br></br>
         <input id = "name" ref = {testRef} onInput = {handleInput} value = {foucsText} />
      </div>
   );
}

输出