感谢您的帮助。
[这里,我尝试过的!!请帮助我获得功能,当我输入第一个数字时,它应该移至下一个数字,依此类推..,我们还应该具有返回功能。
注意:我不想为此使用任何npm,需要自定义逻辑。
HTML / UI代码:
<form className="readmin-form custom_form" onSubmit={handleSubmit(this.onSubmitHandler.bind(this))} id="googleAuth">
<div className="row">
<span>Note : Please enter your Google Authentication Code below.</span>
</div>
<div className="row">
<div className="col-md-2 mt-2">
<Field name={'pin1'}
maxLength={"1"}
normalize={isInteger}
id='pin1'
className="auth-input-pin"
onKeyUp={(event)=>this.enterPin(event,1)}
component={renderTextField}
/>
</div>
<div className="col-md-2 mt-2">
<Field name={'pin2'}
maxLength={"1"}
id='pin2'
tabindex={1}
className="auth-input-pin"
normalize={isInteger}
onKeyUp={(event)=>this.enterPin(event,2)}
component={renderTextField}
/>
</div>
<div className="col-md-2 mt-2">
<Field name={'pin3'}
id='pin3'
className="auth-input-pin"
maxLength={"1"}
normalize={isInteger}
onKeyUp={(event)=>this.enterPin(event,3)}
component={renderTextField}
/>
</div>
<div className="col-md-2 mt-2">
<Field name={'pin4'}
id='pin4'
className="auth-input-pin"
maxLength={"1"}
normalize={isInteger}
onKeyUp={(event)=>this.enterPin(event,4)}
component={renderTextField}
/>
</div>
<div className="col-md-2 mt-2">
<Field name={'pin5'}
maxLength={"1"}
id="pin5"
className="auth-input-pin"
normalize={isInteger}
onKeyUp={(event)=>this.enterPin(event,5)}
component={renderTextField}
/>
</div>
<div className="col-md-2 mt-2">
<Field name={'pin6'}
normalize={isInteger}
id="pin6"
className="auth-input-pin"
maxLength={"1"}
onKeyUp={(event)=>this.enterPin(event,6)}
component={renderTextField}
/>
</div>
</div>
</form>
逻辑部分:
onSubmitHandler = (formProp) => {
// here i want to write logic
}
Feild
组件使用React Refs来设置焦点。请参阅此以获得帮助-https://codepulse.blog/how-to-focus-element-in-react/