在 ReactJS 中渲染后如何在输入字段上设置焦点？

在 ReactJS 中渲染后在输入字段上设置焦点可以通过以下方式完成，但在此之前，请通过以下步骤设置项目结构：

创建反应应用程序：

第 1 步：使用以下命令创建一个 React 应用程序：

npx create-react-app foldername

第 2 步：创建项目文件夹（即文件夹名称）后，使用以下命令移动到该文件夹：

cd foldername

项目结构：它将如下所示。

项目结构

方法 1：我们可以在componentDidMount()函数和 refs 回调中做到这一点。例如：

componentDidMount() {
  this.nameInput.focus();
}

文件名：App.js

Javascript

import React, { Component } from "react";
class App extends Component {
  
  componentDidMount() {
    this.nameInput.focus();
  }
  
  render() {
    return (
      

        
         { this.nameInput = input; }}
          defaultValue="It will focus"
        />
      
    );
  }
  
}
  
export default App;

方法 2：如果我们只是想在安装（初始渲染）时关注一个元素，那么简单地使用autoFocus属性就可以了。我们可以使用autoFocus道具在安装时自动聚焦输入。

文件名：App.js

Javascript

import React, { Component } from "react";
  
class App extends Component  {
    
  render() {
    return(
    

      
      
    
    );
  }          
}
  
export default App;

方法 3：我们可以使用以下语法使用内联 ref 属性。

 input && input.focus()}/>

文件名：App.js

Javascript

import React, { Component } from "react";
  
class App extends Component  {
    
  render() {
    return(
      

        
         {input && input.focus() }} 
          defaultValue="It will focus"
        />
      
    );
  }
            
}
  
export default App;

运行应用程序的步骤：从项目的根目录使用以下命令运行应用程序：

npm start

输出：