Javascript 按 Enter React.js 时专注于下一个字段
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/38577224/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Focus on next field when pressing enter React.js
提问by Guillermo
I would like to find a way to focus on the next field when I click enter in the input using 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'
/>
This is the best way I have found so far, however I don't want to repeat myself by creating a function everytime I want that to happen. Is there a better and cleaner way to implement this?
这是迄今为止我发现的最好的方法，但是我不想在每次我希望发生这种情况时通过创建一个函数来重复自己。有没有更好，更干净的方法来实现这一点？
回答by Vitaly Kuznetsov
If the amount of inputs is moderate:
如果输入量适中：
function handleEnter(event) {
if (event.keyCode === 13) {
const form = event.target.form;
const index = Array.prototype.indexOf.call(form, event.target);
form.elements[index + 1].focus();
event.preventDefault();
}
}
...
<form>
<input onKeyDown={handleEnter} />
<input onKeyDown={handleEnter} />
<input />
</form>
Otherwise, you can wrap inputinto a separate component:
否则，您可以包装input成一个单独的组件：
function MyInput(props) {
return <input onKeyDown={handleEnter} {...props} />;
}
回答by mnsr
You can use componentDidMount and auto bind refs through a for-in loop.
您可以通过 for-in 循环使用 componentDidMount 和自动绑定引用。
http://codepen.io/jzmmm/pen/PzZgRX?editors=0010
http://codepen.io/jzmmm/pen/PzZgRX?editors=0010
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>
);
}
回答by Guillermo
This is how I managed to make it simpler:
这就是我设法使它更简单的方法：
@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'
/>
