反应-连续输入的单独框

Question

我想创建一个看起来像这样的组件：

每个字段均包含2位数字。当第一个字段用两位数字填充时，光标会自动移动到第二个字段，依此类推。

在React-native中，有一个TextInput组件非常适合我的情况。

您对在React中如何使用它有任何建议吗？

Answer 1

为了操作DOM元素，请使用refs。在安装时，将焦点放在第一个输入元素上，其余元素放在blur。数据填充后，移动将焦点从一个输入元素转移到另一个。

class App extends React.Component{
      state = {
        firstValue : "",
        secValue: "",
        thirdValue : ""
      }
      componentDidMount(){
        this.firstInput.focus();
       this.secInput.blur();
       this.thirdInput.blur();
      }
      onChange = (e)=>{
      if(this.firstInput.value.length == 2){
          this.secInput.focus();
      }
      if(this.secInput.value.length == 2){
          this.thirdInput.focus();
      }
       this.setState({
         [e.target.name] = [e.target.value]
       });
      }
      render() {
        return(
          <div>
            <input 
              maxlength = "2"
              ref={(input) => { this.firstInput = input; }} 
              value={this.state.firstValue}
              onChange = {this.Change}
            />
           <input 
              maxlength = "2"
              ref={(input) => { this.secInput = input; }} 
              value={this.state.secValue}
              onChange = {this.Change}
            />
            <input 
              maxlength = "2"
              ref={(input) => { this.thirdInput = input; }} 
              value={this.state.thirdValue}
              onChange = {this.Change}
            />
          </div>
        );
      }
    }

    ReactDOM.render(<App />, document.getElementById('app'));