时间戳

首页 > 解决方案 > 当最大长度充满第一个输入时，将焦点从一个输入移动到反应 js 中的另一个输入

reactjs - 当最大长度充满第一个输入时，将焦点从一个输入移动到反应 js 中的另一个输入

问题描述

当第一个输入的最大长度已满时，将焦点从一个输入移动到反应 js 中的另一个输入

<div className="col-2">
                                            <div className="form-group">
                                                <input type="text" className="form-control text-center" maxLength={1} ref={this.vc1} returnkeytype={'next'} value={this.state.v1} onSubmitEditing={this.maxLength?1:() => this.focusNextField('2')} />
                                            </div>
                                        </div>
                                        <div className="col-2">
                                            <div className="form-group">
                                                <input type="text" className="form-control text-center" maxLength={1} ref={this.vc2} returnkeytype={'next'}  value={this.state.v2} onSubmitEditing={(event) => this.focusNextField('3')}/>
                                            </div>
                                        </div>

项目清单

标签： reactjsreact-router

解决方案

refs通过使用帮助聚焦逻辑，您有正确的想法。一种简单的方法是跟踪 的数组refs，并在输入更改时更新与ref. 使用 state 来跟踪该索引。

然后在componentDidUpdate()状态更改时触发哪个，您可以识别它ref并检查其输入值的长度是否与其最大长度匹配。如果是这样，那么您只需将注意力集中在下一个 (+1) 索引处的 ref 上。

这是一个工作沙箱：https ://codesandbox.io/s/sharp-fast-yo4mg

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

import "./styles.css";

class App extends React.Component {
  state = {
    v1: "",
    v2: "",
    v3: "",
    currentRefIndex: null
  };

  vc1 = React.createRef();
  vc2 = React.createRef();
  vc3 = React.createRef();

  onChange = (e, index) => {
    this.setState({
      [e.target.name]: e.target.value,
      currentRefIndex: index
    });
  };

  componentDidUpdate() {
    const refs = [this.vc1, this.vc2, this.vc3];

    const { currentRefIndex } = this.state;

    //get current ref attributes
    const currentRef = refs[currentRefIndex].current;
    const currentRefMaxLength = currentRef.maxLength;
    const currentRefValue = currentRef.value;

    if (
      currentRefValue.length === currentRefMaxLength &&
      currentRefIndex < refs.length - 1
    ) {
      refs[currentRefIndex + 1].current.focus();
    }
  }

  render() {
    return (
      <div>
        <div className="col-2">
          <div className="form-group">
            <input
              type="text"
              className="form-control text-center"
              maxLength={1}
              ref={this.vc1}
              returnkeytype={"next"}
              name="v1"
              value={this.state.v1}
              onChange={e => this.onChange(e, 0)}
            />
          </div>
        </div>
        <div className="col-2">
          <div className="form-group">
            <input
              type="text"
              className="form-control text-center"
              maxLength={3}
              ref={this.vc2}
              returnkeytype={"next"}
              name="v2"
              value={this.state.v2}
              onChange={e => this.onChange(e, 1)}
            />
          </div>
        </div>
        <div className="col-2">
          <div className="form-group">
            <input
              type="text"
              className="form-control text-center"
              maxLength={2}
              ref={this.vc3}
              returnkeytype={"next"}
              name="v3"
              value={this.state.v3}
              onChange={e => this.onChange(e, 2)}
            />
          </div>
        </div>
      </div>
    );
  }
}

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

推荐阅读