极客教程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>
);
}
输出
