如何将下一个输入(如果有)聚焦在下一次按下 [英] How to focus next input (if any) on next press

问题描述

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

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
  }
}

这篇关于如何将下一个输入(如果有)聚焦在下一次按下的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！