ReactJS 如何将输入元素集中在渲染上| useRef 和 useEffect 示例

这篇文章讲述了如何在Reactjs的表单验证中设置输入元素的焦点

在UI表单的输入元素上添加输入焦点，使验证变得简单，并通过键盘标签控制输入元素。

在React类组件中使用ref关注输入元素

ReactJS中的ref和createRef在有状态的组件中提供了一个访问特定的DOM元素。这些也被称为类组件

使用这个，它提供了对输入元素的焦点控制：

• 创建输入元素，添加ref 指令
• 在构造函数中使用初始化输入元素React.createRef()
• ComponentDidMount是一个回调，在组件被安装后被调用。
• 使用this.inputRef.current访问该元素，调用**focus()**方法

完成组件代码：

import React, { Component } from 'react';

class InputFocusComponent extends Component {
    constructor(props) {
        super(props);
        this.inputRef = React.createRef();
    }

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

    render() {
        return (
            <div>
                <label>Enter Name</label>
                <input type="text" ref={this.inputRef} />

            </div>
        );
    }
}

export default InputFocusComponent;

在反应类组件中使用ref来关注输入元素

useEffect,useRef是reactjs中的钩子，用于访问功能组件中的DOM元素。这些也被称为无状态组件。

useRef钩子有初始值，返回DOM元素的可变参考值useEffect钩子在react中相当于ComonentDidMount，一旦组件被安装，就会被调用。 在useEffect函数中设置焦点到输入元素 添加参考值到输入属性。

在react中设置输入元素焦点控制的功能组件示例

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

const InputFocusUseHook = () => {
    const inputRef = useRef(null);
    useEffect(() => inputRef.current && inputRef.current.focus());

    return (
        <div>
            <label>Enter Name</label>
            <input type="text" ref={inputRef} />

        </div>
    );
};

export default InputFocusUseHook;

总结

这篇文章涵盖了在ReactJS中对输入元素设置焦点的内容

• ref和CreateRef对DOM的访问
• useRef和useEffect钩子