Javascript 如何在React js中将输入的选择从用户名更改为密码

我是react的新手，我有一个带有2个输入（用户名和密码）的登录页面。当我插入用户名并按enter选择更改和转到密码输入时

render() {

 <input className="input100 backUserImage" maxLength="20" type="text" 
        name="txtUserName" id="txtUserName" placeholder="userName" />
 <input className="input100 backPassImage" maxLength="20" 
        type="password" name="txtPassWord" id="txtPassWord" placeholder="password" />

}

render（）{
}

您应该将输入包装在表单中，并添加提交按钮。提交按钮将与输入键一起工作，tab键将用于输入字段切换

<>
<form onSubmit={this.handleSubmit}> //you have to write handleSubmit function
<div className="form-group">
<input className="input100 backUserImage" maxLength="20" type="text" name="txtUserName" id="txtUserName" placeholder="userName" /> 
<input className="input100 backPassImage" maxLength="20" type="password" name="txtPassWord" id="txtPassWord" placeholder="کلمه عبور" /> 
</div>
<input type="submit" value="Login"/>
</form>

//您必须编写handleSubmit函数

---

有关详细说明和示例，请查看

您应该将输入包装成一个表单并添加一个提交按钮。提交按钮将与输入键一起工作，tab键将用于输入字段切换

<>
<form onSubmit={this.handleSubmit}> //you have to write handleSubmit function
<div className="form-group">
<input className="input100 backUserImage" maxLength="20" type="text" name="txtUserName" id="txtUserName" placeholder="userName" /> 
<input className="input100 backPassImage" maxLength="20" type="password" name="txtPassWord" id="txtPassWord" placeholder="کلمه عبور" /> 
</div>
<input type="submit" value="Login"/>
</form>

//您必须编写handleSubmit函数

---

有关详细的解释和示例，请查看

在使用完第一个输入标记后，您应该关注第二个输入标记。你可以通过这样做来实现

    <input
        ref={(input) => {
          this.nameInput = input;
        }}
      />
      <input
        ref={(input) => {
          this.passinput = input;
        }}
      />
      <div className="col-md-6 form-group">
        <input
          className="btn btn-primary"
          value="Reserve Now"
          onClick={()=>{this.passinput.focus();}}
          style={{ cursor: "pointer" }}
        />
      </div>

{
this.nameInput=输入；
}}
/>
{
this.passinput=输入；
}}
/>
{this.passinput.focus（）；}}
样式={{光标：“指针”}
/>

---

您可以添加验证并进行聚焦，上面的代码段只是一个示例。

使用第一个输入标记后，您应该关注第二个输入标记。你可以通过这样做来实现

    <input
        ref={(input) => {
          this.nameInput = input;
        }}
      />
      <input
        ref={(input) => {
          this.passinput = input;
        }}
      />
      <div className="col-md-6 form-group">
        <input
          className="btn btn-primary"
          value="Reserve Now"
          onClick={()=>{this.passinput.focus();}}
          style={{ cursor: "pointer" }}
        />
      </div>

{
this.nameInput=输入；
}}
/>
{
this.passinput=输入；
}}
/>
{this.passinput.focus（）；}}
样式={{光标：“指针”}
/>

---

您可以添加您的验证并进行上面的重点讨论。代码段只是一个示例。

如果您是初学者，我强烈建议您查看有关如何在react中处理表单的文档。

---

这是学习任何技术的最佳方法。

如果您是初学者，我强烈建议您查看有关如何在react中处理表单的文档。 这是学习任何技术的最好方法。

我找到了答案

constructor() {
    super();
    this.nameFocus = React.createRef();
    this.passFocus = React.createRef();
    this.captchaFocus = React.createRef();
    this.submitFocus = React.createRef();
}

handleKeyDown = (event) => {
    if (event.key === 'Enter' || event.key === 'Tab') {
        switch(event.target.name){
            case 'txtUserName':
                if ($("#txtUserName").val().length !== 0) {
                    ($("#txtPassWord").val().length === 0) ? this.passFocus.current.focus() : this.captchaFocus.current.focus();
                }
            case 'txtPassWord':
                if ($("#txtPassWord").val().length !== 0) {
                    ($("#txtUserName").val().length === 0) ? this.nameFocus.current.focus() : this.captchaFocus.current.focus();
                }
            case 'txtCaptcha': {
                if ($("#txtCaptcha").val().length !== 0) {
                    if ($("#txtPassWord").val().length !== 0 && $("#txtUserName").val().length !== 0) {
                        this.submitFocus.current.focus()
                    }else if ($("#txtUserName").val().length === 0) {
                        this.nameFocus.current.focus()
                    }else if ($("#txtPassWord").val().length === 0) {
                        this.passFocus.current.focus()
                    }
                }
            }
        }
    }
  }

  <input className="input100 backUserImage" ref={this.nameFocus} onKeyDown={this.handleKeyDown} maxLength="20" type="text" name="txtUserName" id="txtUserName" placeholder="UserName"} />

constructor（）{
超级（）；
this.nameFocus=React.createRef（）；
this.passFocus=React.createRef（）；
this.captchaFocus=React.createRef（）；
this.submitFocus=React.createRef（）；
}
handleKeyDown=（事件）=>{
如果（event.key=='输入'| | event.key==='选项卡'）{
开关（event.target.name）{
案例“txtUserName”：
if（$（“#txtUserName”）.val（）.length！==0）{
（$（“#txtPassWord”）.val（）.length==0）？this.passFocus.current.focus（）：this.captchaFocus.current.focus（）；
}
案例“txtPassWord”：
if（$（“#txtPassWord”）.val（）.length！==0）{
（$（“#txtUserName”）.val（）.length==0）？this.nameFocus.current.focus（）：this.captchaFocus.current.focus（）；
}
案例“txtCaptcha”：{
if（$（“#txtCaptcha”）.val（）.length！==0）{
if（$（“#txtPassWord”）.val（）.length！==0&$（“#txtUserName”）.val（）.length！==0）{
this.submitFocus.current.focus（）
}else if（$（“#txtUserName”）.val（）.length==0）{
this.nameFocus.current.focus（）
}else if（$（“#txtPassWord”）.val（）.length==0）{
this.passFocus.current.focus（）
}
}
}
}
}
}

其余的输入具有相同的类型，但不同的

ref={this.nameFocus}

我找到了我的答案

constructor() {
    super();
    this.nameFocus = React.createRef();
    this.passFocus = React.createRef();
    this.captchaFocus = React.createRef();
    this.submitFocus = React.createRef();
}

handleKeyDown = (event) => {
    if (event.key === 'Enter' || event.key === 'Tab') {
        switch(event.target.name){
            case 'txtUserName':
                if ($("#txtUserName").val().length !== 0) {
                    ($("#txtPassWord").val().length === 0) ? this.passFocus.current.focus() : this.captchaFocus.current.focus();
                }
            case 'txtPassWord':
                if ($("#txtPassWord").val().length !== 0) {
                    ($("#txtUserName").val().length === 0) ? this.nameFocus.current.focus() : this.captchaFocus.current.focus();
                }
            case 'txtCaptcha': {
                if ($("#txtCaptcha").val().length !== 0) {
                    if ($("#txtPassWord").val().length !== 0 && $("#txtUserName").val().length !== 0) {
                        this.submitFocus.current.focus()
                    }else if ($("#txtUserName").val().length === 0) {
                        this.nameFocus.current.focus()
                    }else if ($("#txtPassWord").val().length === 0) {
                        this.passFocus.current.focus()
                    }
                }
            }
        }
    }
  }

  <input className="input100 backUserImage" ref={this.nameFocus} onKeyDown={this.handleKeyDown} maxLength="20" type="text" name="txtUserName" id="txtUserName" placeholder="UserName"} />

constructor（）{
超级（）；
this.nameFocus=React.createRef（）；
this.passFocus=React.createRef（）；
this.captchaFocus=React.createRef（）；
this.submitFocus=React.createRef（）；
}
handleKeyDown=（事件）=>{
如果（event.key=='输入'| | event.key==='选项卡'）{
开关（event.target.name）{
案例“txtUserName”：
if（$（“#txtUserName”）.val（）.length！==0）{
（$（“#txtPassWord”）.val（）.length==0）？this.passFocus.current.focus（）：this.captchaFocus.current.focus（）；
}
案例“txtPassWord”：
if（$（“#txtPassWord”）.val（）.length！==0）{
（$（“#txtUserName”）.val（）.length==0）？this.nameFocus.current.focus（）：this.captchaFocus.current.focus（）；
}
案例“txtCaptcha”：{
if（$（“#txtCaptcha”）.val（）.length！==0）{
if（$（“#txtPassWord”）.val（）.length！==0&$（“#txtUserName”）.val（）.length！==0）{
this.submitFocus.current.focus（）
}else if（$（“#txtUserName”）.val（）.length==0）{
this.nameFocus.current.focus（）
}else if（$（“#txtPassWord”）.val（）.length==0）{
this.passFocus.current.focus（）
}
}
}
}
}
}

---

其余的输入具有相同的类型，但defrent

ref={this.nameFocus}

这是一种糟糕的做法。通常，

在表单中输入

表示提交<表单中的code>Tab意味着从一个输入切换到另一个输入。我认为这将自动使用Tab键。并且用enter键绑定它并不是一个好选项，因为enter键用于submit按钮default@PrateekThapa你的意思是我应该改变表格的选择？怎么做？我的意思是让表单自己处理。您不需要过度使用

登录

表单。确保显示适当的错误，表单提交后，它将执行登录操作。这是一种糟糕的做法。通常，

在表单中输入

表示提交<表单中的code>Tab意味着从一个输入切换到另一个输入。我认为这将自动使用Tab键。并且用enter键绑定它并不是一个好选项，因为enter键用于submit按钮default@PrateekThapa你是说我应该换衣服