如何在React中管理输入密码的google身份验证？

Question

谢谢你的帮助。

在这里，我已经尝试了！，请帮助我有这个功能，当我输入第一个数字时，它应该移动到下一个，依此类推，我们也应该有后退功能。

注意:我不想为此使用任何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
}

查看：

​

Answer 1

您可以使用Feild组件的React Refs来设置焦点。有关帮助，请参阅此文档- https://codepulse.blog/how-to-focus-element-in-react/