时间戳

首页 > 解决方案 > 达到最大长度值后关注下一个输入 - reactjs

javascript - 达到最大长度值后关注下一个输入 - reactjs

问题描述

这些是我的输入：

<input onChange={(event)=>this.setState({cardNumber4:event.target.value})}  name="card4" type="text" class="form-control col-xs-3 col-sm-3" style={{paddingLeft:'0px !important;'}} required="" autocomplete="off" tabindex="4" maxlength="4" />
<input onChange={(event)=>this.setState({cardNumber3:event.target.value})}  name="card3" type="text" class="form-control col-xs-3 col-sm-3" style={{paddingLeft:'0px !important;'}} required="" autocomplete="off" tabindex="3" maxlength="4" />
<input onChange={(event)=>this.setState({cardNumber2:event.target.value})}  name="card2" type="text" class="form-control col-xs-3 col-sm-3" style={{paddingLeft:'0px !important;'}} required="" autocomplete="off" tabindex="2" maxlength="4" />
<input onChange={(event)=>this.setState({cardNumber1:event.target.value})} name="card1" type="text" class="form-control col-xs-3 col-sm-3" style={{paddingLeft:'0px !important;'}} required="" autocomplete="off" tabindex="1" maxlength="4" />

现在我想在填写第一个输入后进入下一个输入（我不想使用制表符或下一个键）。我能怎么做？

标签： javascriptreactjs

解决方案

您可以通过使用 react refs 和输入中的数据属性以编程方式聚焦输入。这是一个粗略的例子，根据你的需要改变它：

handleInputChange(e) {
  const index = e.currentTarget.dataset.index;

  if (e.target.value.length > 4) {
    this[`textInput${index + 1}`].current.focus()
  }

}

...
...
...

<input onChange={this.handleInputChange} data-index={1} ref={this.textInput1} name="card1" type="text" tabindex="4" maxlength="4" />
<input onChange={this.handleInputChange} data-index={2} ref={this.textInput2} name="card1" type="text" tabindex="4" maxlength="4" />

您可以通过React.createRef()在构造函数上使用来创建 ref。例子：

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

推荐阅读