javascript - 使用 react refs 来关注兄弟元素

Question

我正在尝试创建一个使用 refs 的反应表单。我需要的是当用户在一个输入字段中输入一个值时。它应该自动关注下一个兄弟元素，即第二个输入元素，依此类推，直到到达输入字段的末尾，并且表单的值应该自动保存到状态中。

我对使用 react refs 很陌生。我尝试开发一个基本的工作，但陷入错误：

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 。任何形式的帮助表示赞赏。

标签： javascriptreactjsdom

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