我如何管理Google身份验证以在React中输入密码？

Posted 2023-01-12

感谢您的帮助。

[这里，我尝试过的！！请帮助我获得功能，当我输入第一个数字时，它应该移至下一个数字，依此类推..，我们还应该具有返回功能。

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