Javascript 按enter React.js键时，关注下一个字段

当我使用React.js在输入中单击enter时，我想找到一种关注下一个字段的方法

  @autobind
  handleKeyPress(event){
    if(event.key === 'Enter'){
      this.refs.email.focus();
    }
  }

  @autobind
  handleKeyPressEmail(event){
    if(event.key === 'Enter'){
      this.refs.zip_code.focus();
    }
  }

        <input
          onKeyPress={this.handleKeyPress}
          ref = 'name'
        />

        <input
          onKeyPress={this.handleKeyPressEmail}
          ref = 'email'
        />

        <input
          ref = 'zip_code'
        />

@autobind
handleKeyPress（事件）{
如果（event.key=='Enter'）{
this.refs.email.focus（）；
}
}
@自动绑定
HandleKeyPress电子邮件（事件）{
如果（event.key=='Enter'）{
this.refs.zip_code.focus（）；
}
}

---

这是到目前为止我发现的最好的方法，但是我不想每次都重复创建函数。有没有更好更干净的方法来实现这一点？

这就是我如何使它更简单的方法：

  @autobind
  handleKeyPress(value, event){
    if(event.key === 'Enter'){
      this.refs[event].focus();
    }
  }

    <input
      onKeyPress={(event) => this.handleKeyPress('email', event)}
      ref = 'name'
    />

    <input
      onKeyPress={(event) => this.handleKeyPress('zip_code', event)}
      ref = 'email'
    />

    <input
      ref = 'zip_code'
    />

@autobind
handleKeyPress（值、事件）{
如果（event.key=='Enter'）{
this.refs[event].focus（）；
}
}
this.handleKeyPress（'email'，event）}
ref='name'
/>
this.handleKeyPress（'邮政编码'，事件）}
ref='电子邮件'
/>

您可以通过for in循环使用componentDidMount和自动绑定引用

constructor（）{
超级（）；
this.\u handleKeyPress=this.\u handleKeyPress.bind（this）；
}
//循环遍历ref的对象，并将每个对象绑定到onkeypress
componentDidMount（）{
for（本图中设x.refs）{
this.refs[x].onkeypress=（e）=>
本._手动按键（e，本.参考文献[x]）；
}
}
//这将检查输入键（13），然后检查下一个节点是否为输入
//然后聚焦下一个输入框
_手动按键（e，现场）{
如果（如keyCode===13）{
e、 preventDefault（）；//如果按钮存在，则阻止表单提交
让next=this.refs[field.name].nextSibling；
if（next&&next.tagName==“输入”）{
this.refs[field.name].nextSibling.focus（）；
}
}
}
render（）{
返回(
);
}

如果存在

：

函数handleEnter（事件）{
如果（event.keyCode===13）{
const form=event.target.form；
const index=Array.prototype.indexOf.call（form，event.target）；
form.elements[index+1].focus（）；
event.preventDefault（）；
}
}
...

不带

：

函数useFocusNext（）{
const controls=useRef（[]）；
常量处理程序=（事件）=>{
如果（event.keyCode===13）{
//如果控件可以重新排序，则为必需
controls.current=controls.current
.filter（（控件）=>document.body.contains（控件））
.排序（（a，b）=>
a、 比较文档位置（b）和节点。文档位置如下
? -1 : 1
);
const index=controls.current.indexOf（event.target）；
const next=controls.current[index+1]；
next&&next.focus（）；
//比如9号，10号
event.preventDefault（）；
}
};
返回useCallback（（元素）=>{
if（元素&&！controls.current.includes（元素））{
控件。当前。推送（元素）；
元素。addEventListener（'keydown'，handler）；
}
}, []);
};
...
const focusNextRef=useFocusNext（）；
提交

无

和打字脚本版本。 跳过禁用的输入

const onKeyPress:React.KeyboardEventHandler=useCallback(
（e） =>{
如果（e.key==“输入”）{
常量输入=Array.from(
//获取包含所有输入的表或tbody。parentElements的数量取决于html的结构
e、 currentTarget？.parentElement？.parentElement？.parentElement？.querySelectorAll(
“输入”
) ?? []
).过滤器（（e）=>！e.已禁用）
常量索引=inputs.indexOf（e.currentTarget）
输入[索引+1]？.focus（）
e、 预防默认值（）
}
},
[]
)
返回

这可以通过删除@autobind并使用部分绑定来改进。例如，

onKeyPress={this.handleKeyPress.bind（this，'email'）}

。但这仅适用于

Function.prototype.bind

polyfill或“较新”浏览器（即非旧ie）。请参阅我的答案以了解其他解决方案Hi Vitaly，谢谢您的建议！但对我来说，只有当我使用event.charCode而不是event.keyCode时，它才起作用。我的页面上的最后一个组件一个包含多个组件的多步骤表单最终表单是a的元素。在react-maskedinput的元素上，我将执行如下检查：

如果（！form.elements | |！form.elements[index+1]）返回警报（“页面上的最后一个输入”）

。在运行我的Web应用程序时，我的控制台返回以下错误：

未处理的承诺拒绝类型错误：“未定义子项”

，你知道为什么吗？@max:它应该在IE9+中工作，你的浏览器是什么，操作系统版本是什么，键盘布局和输入语言？@Webwoman:请创建一个新问题，并附上一个复制该问题的代码示例。是的，但这意味着我的输入在一个表单中，这并不总是正确的

  constructor() {
    super();
    this._handleKeyPress = this._handleKeyPress.bind(this);
  }

  // Loop through the ref's object, and bind each of them to onkeypress
  componentDidMount() {
    for (let x in this.refs) {
      this.refs[x].onkeypress = (e) => 
        this._handleKeyPress(e, this.refs[x]);
    }
  }

  // This checks ENTER key (13), then checks if next node is an INPUT
  // Then focuses next input box
  _handleKeyPress(e, field) {
    if (e.keyCode === 13) {
      e.preventDefault(); // Prevent form submission if button present
      let next = this.refs[field.name].nextSibling;

      if (next && next.tagName === "INPUT") {
        this.refs[field.name].nextSibling.focus();
      }
    }
  }

  render() {
    return (
        <form>
          <input type="text" name="name" ref='name' />
          <input type="text" name="email" ref='email' />
          <input type="text" name="zip_code" ref='zip_code' />
        </form>
    );
  }