一旦达到最大长度值,请关注下一个输入 - reactjs

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了一旦达到最大长度值,请关注下一个输入 - 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" />

现在我想在填充第一个输入后进入下一个输入(我不想使用tab或下一个键)。我能怎么做?

答案

在这种情况下,你应该使用refs。反应文档的一个例子:

class CustomTextInput extends React.Component { 
  constructor(props) { super(props); // create a ref to store the textInput DOM element
  this.textInput = React.createRef();
  this.focusTextInput = this.focusTextInput.bind(this); 
} 
focusTextInput() { 
  // Explicitly focus the text input using the raw DOM API 
  // Note: we're accessing "current" to get the DOM node 
  this.textInput.current.focus(); 
}
  render() { 
  // tell React that we want to associate the <input> ref 
  // with the `textInput` that we created in the constructor 
return ( <div> 
  <input type="text" ref={this.textInput} /> 
  <input type="button" value="Focus the text input" onClick={this.focusTextInput} /> 
 </div> ); 
} 
}
另一答案

您可以通过使用您的输入中的react refs和data-property以编程方式聚焦输入。这是一个粗略的例子,根据您的需要进行更改:

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();

以上是关于一旦达到最大长度值,请关注下一个输入 - reactjs的主要内容,如果未能解决你的问题,请参考以下文章

达到 maxlength 值后关注下一个输入

reac实现控制输入框字符长度

请输入一个长度介于0-5之间的字符串?

MD5 输入/输出的最大长度

达到条目最大长度时的 Xamarin DisplayAlert

IP数据报 首部长度的60字节是怎么来的,下面的看不懂