Javascript 如何设置焦点以呈现在循环中动态创建的redux表单

我使用的是Redux表单，在单击按钮渲染时，我需要在文本框上设置焦点，我已经使用了自动聚焦，但它将在循环的第二个索引上工作

我还使用了document.getElementById（'idname'）

我的代码：

constructor(props){
        super(props)
        this.inputFocus = this.utilizeFocus()
    }
const utilizeFocus = () => {
    const ref = React.createRef()
    const setFocus = () => {ref.current &&  ref.current.focus()}

    return {setFocus, ref} 
}
componentDidUpdate(){
        const set = this.inputFocus.ref.current;
        const sett = ReactDOM.findDOMNode(set);
        if(sett){
            sett.focus();
        }
    } 
<Field
   name={`${facility}.facilityRef`}
    component='input'
    type='text'
    ref={this.inputFocus}
    autoFocus
    aria-label="Facility Ref"
    />

构造函数（道具）{
超级（道具）
this.inputFocus=this.utilitizeFocus（）
}
const utilizeFocus=（）=>{
const ref=React.createRef（）
const setFocus=（）=>{ref.current&&ref.current.focus（）}
返回{setFocus，ref}
}
componentDidUpdate（）{
常量集=this.inputFocus.ref.current；
const sett=ReactDOM.findDOMNode（set）；
如果（sett）{
sett.focus（）；
}
} 

它工作得很好，我会专注于特定领域，但不会 转到下一个字段，表示每个渲染焦点都进入同一个区域 文本框。我需要使用哪个生命周期来完成此任务

我已经集成了组件didmount，但它不会有帮助

在从StackOverflow进行搜索时，我还尝试了refs功能 但每一个地方都显示为按钮点击，但我的问题是动态的 创建表单，然后应用焦点

---

如果您添加自动对焦，您将不需要编写任何上述代码，我是 仅对索引0使用此代码，但在第一次渲染时会显示此代码 很好，但我们无法转到另一个文本框

---

这将帮助您自动聚焦到新创建的字段中。本质上，您希望动态创建参照，以便输入具有唯一的参照。然后在

componentdiddupdate（）

中，只需将该ref作为目标并使用

.focus（）

请注意，这没有Redux表单，但您可能可以创建相同的逻辑。：）

请参阅代码沙盒：

工作代码：

import React from "react";
import ReactDOM from "react-dom";

import "./styles.css";

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      fields: []
    };
    this.nodes = new Map();
  }

  addField = () => {
    const { fields } = this.state;
    let newFieldObj = {
      id: fields.length,
      value: ""
    };

    this.setState({
      fields: [...fields, newFieldObj]
    });
  };

  componentDidUpdate(prevProps, prevState) {
    if (prevState.fields.length !== this.state.fields.length) {
      const refs = Array.from(this.nodes.values());
      const newestRef = refs[refs.length - 1];
      newestRef.focus();
    }
  }

  handleOnChange = (e, inputId) => {
    const fieldsCopy = [...this.state.fields];

    const fieldToUpdate = fieldsCopy.find(field => field.id == inputId);

    fieldToUpdate.value = e.target.value;

    this.setState({
      fields: fieldsCopy
    });
  };

  renderFields = () => {
    const { fields } = this.state;
    return fields.map(field => {
      return (
        <div>
          <input
            key={field.id}
            ref={ref => this.nodes.set(field.id, ref)}
            value={field.value}
            onChange={e => this.handleOnChange(e, field.id)}
          />
        </div>
      );
    });
  };

  render() {
    return (
      <div>
        <div>{this.renderFields()}</div>
        <button onClick={this.addField}>Add Field</button>
      </div>
    );
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

从“React”导入React；
从“react dom”导入react dom；
导入“/styles.css”；
类应用程序扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
字段：[]
};
this.nodes=新映射（）；
}
addField=（）=>{
const{fields}=this.state；
设newFieldObj={
id:fields.length，
值：“”
};
这是我的国家({
字段：[……字段，newFieldObj]
});
};
componentDidUpdate（prevProps、prevState）{
if（prevState.fields.length！==this.state.fields.length）{
const refs=Array.from（this.nodes.values（））；
常数newestRef=refs[refs.length-1]；
newestRef.focus（）；
}
}
handleOnChange=（e，inputId）=>{
const fieldsCopy=[…this.state.fields]；
const fieldToUpdate=fieldsCopy.find（field=>field.id==inputId）；
fieldToUpdate.value=e.target.value；
这是我的国家({
字段：字段透视
});
};
renderFields=（）=>{
const{fields}=this.state；
返回字段。映射（字段=>{
返回(
this.nodes.set（field.id，ref）}
value={field.value}
onChange={e=>this.handleOnChange（e，field.id）}
/>
);
});
};
render（）{
返回(
{this.renderFields（）}
添加字段
);
}
}
const rootElement=document.getElementById（“根”）；
render（，rootElement）；

当使用按钮单击在输入元素上呈现焦点时，我们第一次需要添加超时功能2毫秒，以便它能够识别表单

addForm(){
 setTimeout(() => {
        this.getFocus()
        }, 200);}


getFocus(){
        if(this.props.input.length === 1){
            document.getElementById("facilityRef0").focus();
        }
    }

---

您提到这是动态创建的，您的意思是按钮会创建一个新字段吗？然后该字段被聚焦？是的，点击按钮表单，逐个索引创建，我添加了自动聚焦。它只在第二个索引{index1}上工作良好，不在索引0上工作，请帮助，如果您知道添加自动聚焦，您将不需要编写任何上述代码，我只对索引0使用此代码，但在第一次渲染时，它显示得非常完美，但我们无法转到另一个文本框它可以工作，但我无法转到下一个文本框，我的意思是当我单击键盘选项卡并开始键入焦点以再次返回该文本字段时。componentDidUpdate（prevProps，prevState）{const refs=Array.from（this.nodes.values（））；const newestRef=refs[refs.length-1]；const sett=ReactDOM.findDOMNode（newestRef）；if（sett）{sett.focus（）；}如果你可以添加多个文本框在一次点击创建。此代码将无法工作，请帮助@chris@Madhur是的，这仅在一次创建一个字段时有效。这对于动态表单是有意义的。单击“键盘”选项卡的重要性是什么？单击“添加字段”后，该字段已经聚焦。单击ing选项卡，或者当您用鼠标单击第二个文本框并开始键入时，foucs会出现在提供的文本框中