使用 React 渲染后如何将焦点设置在元素上

介绍

通过将焦点设置在一个元素上，我们会轻轻地将用户引导到下一个预期的输入字段，从而为他们提供更好的浏览体验，减少猜测。

在本文中，我们将学习如何在渲染 React 应用程序或 React 组件后将焦点设置在元素上。

在传统 HTML 中，使用 autofocus 我们内部的属性 标签，它是一个布尔属性，默认设置为 false. 它指示浏览器专注于特定的输入字段，用户可以立即开始输入值：

<form>
    <input type="text" autofocus> // Will focus
    <input type="text"> // Won't focus
</form>

这也适用于我们的 React 应用程序。 尽管如此，当我们想要在渲染后通过更多的编程控制将焦点设置在一个元素上时——我们可以利用 useEffect() 挂钩功能组件和 componentDidMount() 类组件中的生命周期方法。

如何在功能组件中渲染后将焦点设置在元素上

以前，在引入 React hooks 之前，我们无法用函数式组件处理这样的操作。

由于引入了钩子，我们可以知道我们的应用程序/组件何时完全呈现，以便我们可以使用 useEffect() 钩。 我们还可以访问 useRef() 钩子，我们可以用它来直接引用特定元素。

假设我们有一个包含两个字段的表单，并且我们希望在组件渲染后将其中一个字段设置为焦点：

const App = () => {
    return (
        <div className='container'>
            <form>
                <input type="text" placeholder='This has focus' />
                <input type="text" placeholder='No focus when we render' />
            </form>
        </div>
    )
}
export default App;

让我们开始使用 useRef() 反应钩子。 为此，我们将首先导入 useRef() 从 React，创建一个 ref 然后默认将其值设置为 null 然后附加创建的 ref 通过 ref 属性：

import { useRef } from 'react';

const App = () => {
    const inputReference = useRef(null);

    return (
        <div className='container'>
            <form>
                <input type="text" ref={inputReference} placeholder='This has focus' />
                <input type="text" placeholder='No focus when we render' />
            </form>
        </div>
    )
}
export default App;

请注意： 请注意，我们仅将创建的引用附加到输入元素之一，这是我们想要设置为焦点的元素。

现在让我们继续使用 useEffect() 在渲染我们的应用程序后，钩子将焦点添加到元素：

import { useRef, useEffect } from 'react'

const App = () => {
    const inputReference = useRef(null);

    useEffect(() => {
        
    }, [])

    return (
        <div className='container'>
            <form>
                <input type="text" ref={inputReference} placeholder='This has focus' />
                <input type="text" placeholder='No focus when we render' />
            </form>
        </div>
    )
}
export default App;

在上面的代码中，请注意我们导入了 useEffect() 钩子，然后使用带有空依赖数组的钩子（[]) 以确保它仅在组件最初安装时触发。 最后，为了使引用的元素成为焦点，我们将通过 current 属性，然后附加 focus() 方法：

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

此时，当我们的应用程序或组件渲染时，引用的元素会自动获得焦点：

import { useRef, useEffect } from 'react';

const App = () => {
    const inputReference = useRef(null);

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

    return (
        <div className='container'>
            <form>
                <input type="text" ref={inputReference} placeholder='This has focus' />
                <input type="text" placeholder='No focus when we render' />
            </form>
        </div>
    )
}
export default App;

如何在类组件中渲染后将焦点设置在元素上

到目前为止，我们已经看到了如何将焦点设置在具有功能组件的元素上，但是它与类组件的语法完全不同，因为我们不再使用钩子，因为它们只在功能组件中工作。 在类组件中，我们在 constructor() 方法和利用 componentDidMount() 一旦我们的应用程序呈现，将引用的元素设置为焦点的方法：

import React, { Component } from 'react';

export class App extends Component {
    constructor(props) {
        super(props);
        this.inputReference = React.createRef();
    }

    componentDidMount() {
        this.inputReference.current.focus();
    }

    render() {
        return (
            <div className='container'>
                <form>
                    <input type="text" ref={this.inputReference} placeholder='This has focus' />
                    <input type="text" placeholder='No focus when we render' />
                </form>
            </div>
        )
    }
}
export default App;

在上面的代码中，我们使用了 constructor() 创建引用的方法，我们将其附加到输入元素：

constructor(props) {
    super(props);
    this.inputReference = React.createRef();
}

然后我们使用了 componentDidMount() 生命周期方法，与 useEffect() 钩子，以确保在我们的应用程序/组件呈现后将元素设置为焦点：

componentDidMount() {
    this.inputReference.current.focus();
}

结论

在本文中，我们学习了一旦我们的应用程序或组件同时呈现在 Class 和 Functional 组件中时，如何使用输入字段设置元素为焦点。 两种方法相同，但语法不同，因为它们是两种不同类型的组件。