Использование ответных ссылок, чтобы сосредоточиться на элементе родного брата

Question

Я пытаюсь создать форму реакции, которая использует ссылки. Что мне нужно, это когда пользователь вводит значение в одно поле ввода. он должен автоматически фокусироваться на следующем элементе-брате, т.е. на втором элементе ввода и т. д., пока не будет достигнут конец полей ввода и значение формы не будет автоматически сохранено в состоянии.

Я новичок в использовании реактивных ссылок. Я попытался разработать работающий базис c, но застрял на ошибке:

TypeError: Cannot read property 'nextSibling' of undefined
Todo._handleKeyPress
  22 |    
  23 |    e.preventDefault();
  24 | 
> 25 |    let next = this.refs[field.name].nextSibling;
     | ^  26 |    if (next && next.tagName === "INPUT") {
  27 |      this.refs[field.name].nextSibling.focus();
  28 |    }




import ReactDOM from "react-dom";
import React, { Component } from "react";
import "./style.css";

class Todo extends Component {
  constructor(props) {
    super(props); // create a ref to store the textInput DOM element

    this.state= {

    }


    this.textInput1 = React.createRef();
    this.textInput2 = React.createRef();
    this.textInput3 = React.createRef();
  }

  _handleKeyPress = (e, field) => {
    e.preventDefault();

    let next = this.refs[field.name].nextSibling;
    if (next && next.tagName === "INPUT") {
      this.refs[field.name].nextSibling.focus();
    }
  };


submitForm = () => {

}


  render() {
    return (
      <React.Fragment>
        <form onSubmit={this.submitForm}>
          <input
            type="number"
            name={this.textInput1}
            maxLength="1"
            ref={this.textInput1}
            onKeyPress={e => this._handleKeyPress(e, this.textInput1)}
          />
          <input
            type="number"
            name={this.textInput2}
            maxLength="1"
            ref={this.textInput3}
            onKeyPress={e => this._handleKeyPress(e, this.textInput2)}
          />
          <input
            type="number"
            name={this.textInput3}
            maxLength="1"
            ref={this.textInput3}
            onKeyPress={e => this._handleKeyPress(e, this.textInput3)}
          />

          <button>Submit</button>
        </form>
      </React.Fragment>
    );
  }
}

ReactDOM.render(<Todo />, document.getElementById("root"));

Я включил демонстрационный код в ссылку: https://stackblitz.com/edit/react-6gsfxd. Любая помощь приветствуется.

Answer 1

Второй аргумент field уже является ссылкой на элемент ввода, вам не нужно вызывать его с помощью this.refs.

Я внес несколько изменений в метод _handleKeyPress.

import ReactDOM from "react-dom";
import React, { Component } from "react";
import "./style.css";

class Todo extends Component {
  constructor(props) {
    super(props); // create a ref to store the textInput DOM element

    this.state= {

    }


    this.textInput1 = React.createRef();
    this.textInput2 = React.createRef();
    this.textInput3 = React.createRef();
  }

  _handleKeyPress = (e, field) => {

    let next = field.current.nextSibling;
    field.current.nextSibling.focus();
  };


submitForm = () => {

}


  render() {
    return (
      <React.Fragment>
        <form onSubmit={this.submitForm}>
          <input
            type="number"
            name={this.textInput1}
            maxLength="1"
            ref={this.textInput1}
            onKeyUp={e => this._handleKeyPress(e, this.textInput1)}
          />
          <input
            type="number"
            name={this.textInput2}
            maxLength="1"
            ref={this.textInput2}
            onKeyUp={e => this._handleKeyPress(e, this.textInput2)}
          />
          <input
            type="number"
            name={this.textInput3}
            maxLength="1"
            ref={this.textInput3}
            onKeyUp={e => this._handleKeyPress(e, this.textInput3)}
          />

          <button>Submit</button>
        </form>
      </React.Fragment>
    );
  }
}

ReactDOM.render(<Todo />, document.getElementById("root"));

Пример:

https://stackblitz.com/edit/react-fegfq3?file=index.js