如何将下一个输入(如果有)聚焦在下一次按下

本文介绍了如何将下一个输入(如果有)聚焦在下一次按下的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

我实际上知道如何做到这一点，但我需要一种不同的方法.所以我有这样的文本输入:

I actually know how to this but I need a different approach. So I have text input like:

<TextInput returnKeyType='next' ref={ref => this.someName = ref} onSubmitEditing={(event) => { this.nextFieldName.focus() }}/>

诀窍是我不想为下一个字段使用特定的名称，而是简单地关注下一个(如果有的话).这可能吗?

Trick is that I don't want to use specific name for next field but to simply focus next if any to focus. Is this possible?

推荐答案

你的问题有点宽泛.如果你提供更多细节，我可能会有所帮助，但现在让我举个例子.

It is a bit broad your question. If you give more details I might help but for now let me give you an example.

假设您有一组数据，您要通过这些数据进行映射并创建表单.

Lets say you have an array of data that you are mapping through and creating a form.

const data = [ { type: 'text', value: 'name' }, { type: 'text', value: 'surname' }, { type: 'number', value: 'age' } ];

现在让我们遍历数据

data.map((field, index) => { return ( <TextInput type={field.type} value={this.state[field.value]} ref={(ref) => this.refs[index] = ref} onSubmitEditing={() => this.onSubmitEditing(index)} /> ); });

现在因为我们知道我们在哪个字段以及是否存在另一个字段，我们可以关注或提交表单.

Now because we know which field are we on and if another field is exists or not we can focus or submit the form.

onSubmitEditing = (index) => { if (data.length <= (index + 1)) { this.refs[index + 1].focus(); } else { // no input to move // submit form } }