如何将焦点设置为在循环中动态创建的渲染 redux 表单

Question

我正在使用 Redux-form，我需要在单击按钮时渲染时将焦点设置在文本框上，我已经使用了 autoFocus 但它会在第二个索引上工作循环

also i have used document.getElementById('idname) as well

我的代码：

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"
    />

It works fine, I will get the focus on the particular field but it won't go to next field, Means every rendering focus comes into the same textbox. which life cycle I need to use for this.

我已经集成了 componentDidMount 但是没有用

I have also try refs functionality while searching from Whosebug but every where showing for button click But my question is for dynamically created form then apply focus

If you add autofocus, You won't need to write any above code, I am using this code only for index 0 but on first rendering it is showing perfect but we cannot go to the other text box

Answer 1

这将帮助您自动聚焦到新创建的字段中。本质上，您希望动态创建引用，以便输入具有唯一引用。然后在 componentDidUpdate() 中简单地定位那个 ref 并使用 .focus().

请注意，这没有 Redux-Form，但您可能会创建相同的逻辑。 :)

查看代码和框：https://codesandbox.io/s/cranky-cookies-mz8gx

工作代码：

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);

Answer 2

渲染Focus on Input element with button click时，第一次需要添加超时2毫秒的功能，使其能够识别表单

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


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

如何将焦点设置为在循环中动态创建的渲染 redux 表单

How to set focus on rendering redux form dynamically created in loops

javascript

reactjs

redux

redux-form

react-redux