一旦达到最大长度值,请关注下一个输入 - 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的主要内容,如果未能解决你的问题,请参考以下文章