如何专注于 ReactJS 中的下一个字段输入？

如果我们想在当前输入字段达到其最大字符容量时关注文本输入字段，我们必须找到下一个输入 HTML 元素并使其成为焦点。每次用户在当前文本字段中键入时，我们都必须检查该字段是否具有指定的最大字符。如果是，那么我们必须关注文本输入字段。我们可以使用 focus()函数来聚焦特定的输入字段。

创建反应应用程序：

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

npx create-react-app foldername

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

cd foldername

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

示例：我们在代码中可以看到，每当我们在输入字段中输入时，都会调用handleChange函数，它会根据当前输入字段中输入的字符数来决定下一个字段是否应该成为焦点.如果它达到最大字符，那么它将找到下一个字段并使其成为焦点。当当前输入字段达到最大字符数限制时，这就是下一个输入字段的焦点。

App.js

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

        
      
    );
  }
}
  
class InputFields extends React.Component {
  handleChange = (e) => {
    const { maxLength, value, name } = e.target;
    const [fieldName, fieldIndex] = name.split("-");
  
    let fieldIntIndex = parseInt(fieldIndex, 10);
  
    // Check if no of char in field == maxlength
    if (value.length >= maxLength) {
  
      // It should not be last input field
      if (fieldIntIndex < 3) {
  
        // Get the next input field using it's name
        const nextfield = document.querySelector(
          `input[name=field-${fieldIntIndex + 1}]`
        );
  
        // If found, focus the next field
        if (nextfield !== null) {
          nextfield.focus();
        }
      }
    }
  };
  
  render() {
    return (
      

        
        
        
      
    );
  }
}
class InputFild extends React.Component {
  render() {
    return (
      
    );
  }
}
  
export default App;

输出：